title: AngularJS Promises, $q, defer
body: <p><strong>EDIT</strong></p>
  
  <p>The first answer is the elegant one, but, as stated a few times in this question and another questions on stackoverflow, the problem is that the service and the controller run their thing before the data actually arrives. </p>
  
  <p>(Last comment on the first answer:)</p>
  
  <blockquote>
    <p>Yes, the problem is that the API calls finish AFTER the service runs
    and returns everything to the controller, see here
    screencast.com/t/uRKMZ1IgGpb7 ... That's my BASE question, how could I
    wait on all the parts for the data to arrive?</p>
  </blockquote>
  
  <p>It's like I'm saying it on repeat, <strong>how do we make a service that populates the array after the successful data retrieval, and the controller getting data after all this happens</strong>, because as you can see in my screenshot, things run in a different order.</p>
  
  <hr>
  
  <p>I have this code:</p>
  
  <pre><code> var deferred = $q.defer();
              $http.get('../wordpress/api/core/get_category_posts/?category_id=14 ').success(function(data) {
                  //we're emptying the array on every call
                  theData = [];
                  catName = data.category.slug;
                  theData = data;
                  theData.name = catName;
                  aggregatedData.push(theData);
              });
              $http.get('../wordpress/api/core/get_category_posts/?category_id=15 ').success(function(data) {
                  theData = [];
                  catName = data.category.slug;
                  theData = data;
                  theData.name = catName;
                  aggregatedData.push(theData);
              });
              $http.get('../wordpress/api/core/get_category_posts/?category_id=16 ').success(function(data) {
                  theData = [];
                  catName = data.category.slug;
                  theData = data;
                  theData.name = catName;
                  aggregatedData.push(theData);
              });
              $http.get('../wordpress/api/core/get_category_posts/?category_id=17 ').success(function(data) {
                  theData = [];
                  catName = data.category.slug;
                  theData = data;
                  theData.name = catName;
                  aggregatedData.push(theData);
              });
              //deferred.resolve(aggregatedData);
              $timeout(function() {
                  deferred.resolve(aggregatedData);
              }, 1000);
              /*//deferred.reject('There is a connection problem.');
              if (myservice._initialized) {
                  $rootScope.$broadcast('postsList', deferred.promise);
              }*/
              //myservice._initialized = true;
              myservice = deferred.promise;
              return deferred.promise;
  </code></pre>
  
  <p>For the life of me I can't understand why do I have to put a timeout when passing the resulting array to defer ?</p>
  
  <p>Shouldn't the principle be like, defer waits for the information to come and then returns the promise? What is the point of that 1 second there? From what I understand defer should be able to wait as long as needed for the API to return the result and the return the promised data.</p>
  
  <p>I'm really confused, I've banged my head against the walls for the last two hours because I was not receiving any data in my controller, only when I put that timeout there.</p>