title: AngularJS - returning promise from $http.get loop
body: <p>I am making a GET request on an paginated endpoint, therefore, I am making one call, finding out how many pages the endpoint has, then looping through each page, pushing the response data from each page into one array. </p>
  
  <p>However, since the call is so large, when grabbing this factory data from my controller, I've needed to put a timeout on my function to make sure all the data has come in before it is used.</p>
  
  <p>I was hoping to switch this over to a promise in my factory that the controller would wait for until the request is complete. But since I am looping through each page, the way I would normally structure this doesn't work. How could I rework this to make the promise wait for the complete loop through my endpoint's pages so I can remove the timeout from my controller?</p>
  
  <p><strong>Factory API GET request</strong></p>
  
  <pre><code>var productsData = [];
  var pageNumber = 1;
  var getAllProducts = function(){
      var deferred = $q.defer();
      return $http.get('/api/scroll?page=' + pageNumber,{cache: true})
          .then(function(response) {
              for (var i = response.data.results.length - 1; i &gt;= 0; i--) {
                  productsData.push(response.data.results[i]);
              };
              while (pageNumber &lt;= response.data.pages) {
                  getAllProducts();
                  pageNumber++;
              }
              deferred.resolve(productsData)
              return deferred.promise;
          });
  };
  </code></pre>
  
  <p><strong>Controller Function</strong></p>
  
  <pre><code>    var filterProducts;
      var getProducts = function(type, filter) {
          productFactory.getAllProducts()
          .then(function(products) {
              $timeout( function(){
                  var allProducts = products;
                  switch (type) {
                      case "category":
                          filterProducts = $filter('filter')(allProducts, {
                              custom: {category_code: filter}
                          });
                          break;
                      case "color":
                          filterProducts = $filter('filter')(allProducts, {
                              custom: {color_code: filter}
                          });
                          break;
                      case "season":
                          filterProducts = $filter('filter')(allProducts, {
                              custom: {season: filter}
                          });
                          break;
                      default:
                          filterProducts = allProducts;
                  }
                  $rootScope.products = _.sortBy(filterProducts, function(product) {
                      return product.custom.sku;
                  });
              }, 1000);
          });
      };
  </code></pre>