javascript - AngularJS: service query returning zero result -

my app.js looks like

var app = angular.module('pennytracker', [   '$strap.directives',   'ngcookies',   'categoryservices' ]);  app.config(function($routeprovider) {   console.log('configuring routes');   $routeprovider     .when('/summary', { templateurl: '../static/partials/summary.html'})     .when('/transactions', { templateurl: '../static/partials/transaction.html', controller: 'addtransactioncontroller' }) }); 

while app/js/services/categories.js looks

angular.module('categoryservices', ['ngresource']).   factory('category', function($resource){     return $resource(       '/categories/:categoryid',       {categoryid: '@uuid'}     );   }); 

and have route

  .when('/transactions', { templateurl: '../static/partials/transaction.html', controller: 'addtransactioncontroller' }) 

and controller app/js/controllers/transactioncontroller.js looks like

function addtransactioncontroller($scope, $http, $cookiestore, category) {  // work here   $scope.category = category.query();   console.log('all categories - ', $scope.category.length); } 

when run app, see console.log

all categories -  0  

what doing wrong here?

category.query() asynchronous. returns empty array , adds result request later when response arrives - http://docs.angularjs.org/api/ngresource.$resource:

it important realize invoking $resource object method returns empty reference (object or array depending on isarray). once data returned server existing reference populated actual data. useful trick since resource assigned model rendered view. having empty object results in no rendering, once data arrives server object populated data , view automatically re-renders showing new data.

if need access result in controller should in callback function this:

$scope.category = category.query(function(){   console.log('all categories - ', $scope.category.length); });