Simultaneously retrieving multiple data using $q in angular - angularjs

Question

Folks ..
I need to retrieve data from around 8 difference resources when my program begins.
These resources are independent of each other can can be called parallelly. (i.e I don't need data from one to determine what to retrieve from another resource)
However anything ahead needs to ensure that I have all the data from all the resources on-hand since they operate on each other.
So at the beginning of my controller I call a init function with the following code :
*EDIT To be more specific my exact code is as below
$scope.init = function () {
return $q.all([
Factory1.getCarData.query(), // returns a resource object like [$resolved: false, $then: function]
Factory2.getOtherData.query(), // returns a resource object like [$resolved: false, $then: function]
Factory3.getSomeOtherData.query() // returns a resource object like [$resolved: false, $then: function]
....,
resource8.query()]).then(result) {
$scope.data1 = result[1];
$scope.data2 = result1[2];...
$scope.data8 = result[3];
console.log($scope.data1); //prints as [$resolved: false, $then: function]
console.log($scope.data1[1]);
prints as undefined
doSomethingonData1($scope.data2);
doSomethingonData2($scope.data3, $scope.data4);..etc etc
}
}
Where Factory1 is defined as :
angular.module('app').factory('Factory1', function (Factory1Resource) {
var carPromise = Factory1Resource.query();
return {
getCarData: function(){ return carPromise;}
}
and Factory1Resource is defined as :
.factory('Factory1Resource', ['$resource', function($resource) {
return $resource(myURL, {}, {} );
}])
The whole point of using the factories is to ensure that the data manipulation for all 8 resources is done outside the controller in a indiviual units.
My point is .. I thought that the ".then" function would be invoked only once all resources have resolved. which means that my variables $scope.data1, $scope.data2 etc should have the actual data and not be resource objects.
This is not the case as when I do console.log($scope.data1) .. it prints as [$resolved: false, $then: function]
This breaks the flow of my program.
Now I thought I had done a lot of reading on promises and resources and I was now a enlightened person but apparently i am missing something here.
What I want is that my variables ($scope.data1, $scope.data2 etc) all contain actual data.
Any hints ? Alternately feel free to suggest any better ideas you may have as to how I should lay out my code.

Answer 1

then() takes a function, do it like this
.then(function(result) {
$scope.data1 = result[1];
...
});
Created a demo for you and I simplified a bit of your code. It works fine. Demo

Answer 2

#sza thank you so much for the advice and help here. This does seem the right way to do it however to have a fool proof system in place I did the below :
Set flags in the ".then" section of all Factory.getData.query() - so now code looks like:
Factory1.getCarData.query().then(function(){Data1Retrieved == true})
After this, I keep a watch on all flags, once all flags turn true I start rest of the processing. Again I don't know if this is the right way to do it but it sure seems to be effective.
Thank you everyone for your input again.

Answer 3

Instead of passing the object returned by resource.query directly to $q.all( you should pass resource.query().$promise.
According to angular $resource documentation
The Resource instances and collection have these additional
properties:
$promise: the promise of the original server interaction that created
this instance or collection.
http://docs.angularjs.org/api/ngResource.$resource
update
I decided to create a test by myself using an existing app I developed. I'm going to paste the code that worked for me. Maybe you have a different structure when you're calling the resources:
$provide.factory('GenericResource', ['$resource','$q', function($resource,$q){
var AccountResource = $resource('/user/accounts/balances'),
BankResource = $resource('/banks');
$q.all([AccountResource.query().$promise, BankResource.query().$promise]).then(function(data){
console.log(data);
});
}]);
What output of console.log is:
[
Array[3]
0: Resource
1: Resource
2: Resource
$promise: Object
$resolved: true
length: 3
__proto__: Array[0]
,
Array[4]
0: Resource
1: Resource
2: Resource
3: Resource
$promise: Object
$resolved: true
length: 4
__proto__: Array[0]
]
As you can see the the data returned contained 3 and 4 resource objects representing the data fetched. Is this result similar to the one of yours?