How should i manipulate angularjs resource object for use in the view

Question

Learning javascript and chosen angularjs as a frame work to work with. In my project i use django-tastypie

{

    "meta": { … },
    "objects": [ … ]

}

to create api which i use in angularjs to obtain a resource object which works perfectly,

app.factory('category',['$resource',function($resource){
  return $resource('/api/v1/menu/?format=json',{},{'query':{method:'GET',isArray: false}})
}]);

my problem comes up after i traverse the resource object in my controller,

app.controller('mainCtrl',['category','$scope',function(category,$scope) {
 var data = category.query();
 $scope.categories = data.$promise.then(function(result){
     return result.objects;
  });
}]);

so as to make use of the data in my view,

<li  ng-repeat="category in categories"style="color:black;">
            [[category]]
</li>

But the view never renders the data, category doesn't result to anything

I have surely looked around,done some googling but i feel i would understand if got help with my own problem. Angularjs is complicated and the tutorials out there are not making it any easy.

I do appreciate a good explanation with some examples and links if available.

Answer 1

Since the request is async, you need to assign the results of the call after the call has successfully returned, so:

data.$promise.then(function(result){
  $scope.categories = result.objects;
});