The reason this is happening is because the $resource service returns an empty object that is asynchronously filled after the requested data is obtained.
To solve this:
- Assign the requested data from a non $scope variable.
- Create a function callback in the
query()
action. - Assign the non
$scope
variable in $scope.data within the function callback created in step 2.
e.g.
demo.controller('DemoController', ['$scope', '$state', '$stateParams', 'Demo', function($scope, $state, $stateParams, Demo) {
var queryData = Demo.query(function() {
$scope.data = queryData;
})
}]);
you may see other examples in here.