Adding items to cart directive form controller

Question

I have the following function in my controller:

$scope.items = [];

$scope.addToCart = function(data, $index) {

    ticketService.addToCart(data, $index)
        .success(function(data, status, headers, config) {
            var item = {
                ticket_id: $scope.eventInfo.id,
                ticket_no: $scope.ticketTypes[0].ticket_no,
                ticket_type: 'event',
                ticket_desc: $scope.eventInfo.event_name,
                ticket_class: $scope.ticketTypes[0].fee_cat_desc,
                ticket_price: $scope.ticketTypes[0].event_fee,
                ticket_date: $scope.eventInfo.event_date,
                ticket_time: $scope.eventInfo.event_time,
                ticket_venue: $scope.eventInfo.event_venue,
                ticket_key: data.responseData
            }

            $scope.items.push(item);
        })
        .error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            //alert(data);
        });
}

This is my service:

angular.module('vendor').service('ticketService', ['$http', '$rootScope', function($http, $rootScope) {
    var addToCart = function(data, $index) {
        var req = {
            method: 'POST',
            url: '/api/v1/cart',
            headers: {
                'X-XSRF-Token': $("meta[name='csrf_token']").attr("content")
            },
            data: data,
            cache: true
        }

        return $http(req)
    }

    return {
        addToCart: addToCart
    };

}]);

Now when the user clicks a button it executes this "addToCart" function, the function posts the data to the server and if the data is processed successfully it returns true. Now i want the data that was posted to the server to be added into my cart directive, i keep trying but get no results.

After pushing my "item" object unto my object array i want it to show in my cart directive. This is my cart directive:

(function() {

    angular.module('vendor').directive('cart', ['$http', '$timeout', 'ticketService', function($http, $timeout, ticketService) {
        return {
            restrict: 'E',
            scope: {
                items: '@'
            },
            templateUrl: '/js/app/templates/cart.html',
            link: function($scope, $element, $attrs) {
                $scope.d = {};
                $scope.d.tickets = {};
                $scope.d.extras = {};

            },
            controllerAs: 'cart'
        }
    }]);

}) ();

Answer 1

If you don't really need the isolated/local scope on the directive then just get rid of it and the directive would inherit the controllers scope, thus making items accessible to the directive.