title: AngularJS Promise Returns Empty Array
body: <p>I have this code in a factory:</p>
  
  <pre><code>  getAyahsByJuz: function (juzIndex) {
          var response = [];
          var promises = [];
  
          var self = this;
          var deferred = $q.defer();
          $timeout(function () {
              $http.get('data/quran.json').success(function (data) {
                  var ayahs = Quran.ayah.listFromJuz(juzIndex);
                  angular.forEach(ayahs, function (value, key) {
                      var promise = self.getVerse(value.surah, value.ayah).then(function (res) {
                          var verse = {
                              surah: value.surah,
                              ayah: value.ayah,
                              text: res
                          };
                          response.push(verse);
                      }, function (err) {
                          console.log(err);
                      });
                      promises.push(promise);
                  });
              });
          }, 30);
  
          $q.all(promises).then(function() {
              deferred.resolve(response);
          });
  
          return deferred.promise;
      },
  </code></pre>
  
  <p>Please note that everything is working fine the <code>verse</code> object is returning properly. However, when I use this in a controller using <code>.then(res)</code>. <code>res</code> returns <code>[]</code> instead of the array filled with the verse objects.</p>
  
  <p>Can anyone point out why? Thanks!</p>