Angular resource timing issue - angularjs

Question

Folks I have my application setup as below:
var myApp = angular.module('app', []);
myApp.factory('MotorList', ['$resource', function($resource) {
return $resource(baseURL + 'MotorList.json', {}, {} );
}]);
myApp.factory('MotorDataManager', function(MotorList) {
var List;
MotorList.query().$then(function(value){
List = value.data;
})
return {
getFullList: function() {
return List;
}
anotherFunction: function { ... }
}
});
myApp.controller('MainCtrl', function($scope,MotorDataManager){
$scope.tableData = MotorDataManager.getFullList();
})
IN my front-end I have a ng-repeat that loops through $scope.tableData.
However the issue I am facing is that $scope.tableData never gets rendered. The resource is working fine. It does return data, however I feel this is a timing issue but I am not sure how to resolve it.

Answer 1

Certainly, this is a timing issue. When you call MotorDataManager.getFullList(), you are getting undefined because the callback which sets it never gets set. So, $scope.tableData is undefined.
You need $scope.tableData to have a reference to something that changes. Here is one way to do it:
myApp.factory('MotorDataManager', function(MotorList) {
var list = [];
MotorList.query().$then(function(value){
angular.forEach(value, function(item) {
list.push(item);
});
});
return {
getFullList: function() {
return list;
}
}
});
myApp.controller('MainCtrl', function($scope,MotorDataManager){
$scope.tableData = MotorDataManager.getFullList();
});
In this example, you are now returning an array, so to start with, $scope.tableData will be an empty array. But that will be OK, because you now have a reference to something. When the $resource returns, it will populate the array (which is the same reference) so your controller will now have a populated array. Angular's data binding and digestion logic should take care of the rest.