title: Simultaneously retrieving multiple data using $q in angular
body: <p>Folks .. </p>
  
  <p>I need to retrieve data from around 8 difference resources when my program begins. </p>
  
  <p>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)</p>
  
  <p>However anything ahead needs to ensure that I have all the data from all the resources on-hand since they operate on each other.</p>
  
  <p>So at the beginning of my controller I call a init function with the following code :</p>
  
  <p>*<strong>EDIT</strong> To be more specific my exact code is as below</p>
  
  <pre><code>$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
      }
  }
  </code></pre>
  
  <p>Where Factory1 is defined as :</p>
  
  <pre><code>angular.module('app').factory('Factory1', function (Factory1Resource)  {    
     var carPromise = Factory1Resource.query(); 
      return {
        getCarData: function(){ return carPromise;}
      }
  </code></pre>
  
  <p>and Factory1Resource is defined as :</p>
  
  <pre><code>.factory('Factory1Resource', ['$resource', function($resource) {
      return $resource(myURL, {}, {} );
    }])
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>This is not the case as when I do console.log($scope.data1) .. it prints as [$resolved: false, $then: function]</p>
  
  <p>This breaks the flow of my program.</p>
  
  <p>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.</p>
  
  <p>What I want is that my variables ($scope.data1, $scope.data2 etc) all contain actual data.</p>
  
  <p>Any hints ? Alternately feel free to suggest any better ideas you may have as to how I should lay out my code.</p>