I am unable to access $rootScope in my controller

Question

I have some parameters in the $rootScope as specified below:

myApp.factory('itemService', function($http) {
    return $http.get('/items');
});

myApp.run(function($rootScope, itemService) {
    itemService.success(function(response) {
        $rootScope.items = response;
    });
});

myApp.controller('displayCtrl', function($rootScope, $scope) {
    $scope.items = $rootScope.items;
});

When I run the above code, I get this error from firebug TypeError: $rootScope.items is undefined. I really do not know what is happening.

Here is a small addition. items is an array with a list of objects like this:

items = [
  {'name': 'spoon', 'price': 200},
  {'name': 'table', 'price': 400},
  {'name': 'shoe', 'price': 250}
];

I wish to make items available constantly in my app such that I can display each item on the item list (items) without making another request to the server. I intend to achieve this by simply displaying an item using $scope.item = items[$routeParams.id] each time I need to display an item. I look forward to implement this using either a function attached to ng-click or the normal #/route/:param mechanism. Thanks

Answer 1

Finally, I was able to come up with a solution. I realized that the problem was to have $rootScope.items available in displayCtrl at the same time it loads. But $rootScope.items is available in my view when my html page loads. So I simply passed the item id as a parameter and obtained it using $routeParams as follows

myApp.controller('displayCtrl', function($routeParams, $scope) {
    $scope.item_id = $routeParams.id; //given that the route looks like '/item/:id'
}); 

Then in my HTML file this what I did

<div ng-bind="items[item_id].name"></div>
<div ng-bind="items[item_id].price"></div>

This actual solved my problem.