As we build our app, we are going to need a couple of scope objects that would be used across the entire application.

We can define these objects in an AppCtrl controller and map it high up in the DOM tree structure so that they can be easily inherited down to the child scopes. Create the AppCtrl controller function in our controllers.js file and then add the following scope objects:

.controller('AppCtrl', ['$scope', 'categoryService',
        function($scope, categoryService) {
            $scope.categories = categoryService.getCategories();
            $scope.user = {};
            $scope.shoppingBasket = [ ];
        }
]);

As you can see, we are making use of both getCategories and categoryService. So, let's go ahead and create these in our services.js file as follows:

.factory("categoryService", [function() {
        return {

            getCategories: function() {
                var categories = ['Toys', 'Electronics', 'Books', 'Furniture', 'Collectibles...