title: promise .then() to run sequentially inside a for loop
body: <p>I'm trying to fill my <code>$scope.results = []</code> sequentially by multiple sequential API calls. sequential is important as i'm passing in a start and a limit number (something like pagination). There is a reason that I cannot do this in 1 call and need to break into multiple calls since the API gateway timeouts after  30s.</p>
  <p>My problem is in the for loop it doesnt work sequentially. Inside the array all network requests seem to get the same <code>start</code> values and are not sent sequentially. I also cannot use <code>async/await</code>. Is there a way to run the API calls sequentially and get add the result to the <code>results</code> array. My final goal is to fill the array like it happened in a single API call but with multiple calls</p>
  <pre><code>         $scope.detailedReportOfAll = function () {
              $scope.start = 0;
              $scope.limit = 15;
              $scope.results = [];
              var requestCount = 1;
              APIService.getDetailedReportData($scope.start,$scope.limit).then(
                function ({result,nbPages}) {
                  if (result.length){
                    $scope.results = $scope.results.concat(result);
                    requestCount ++;
                    $scope.start += $scope.limit;
                  }
                  if (requestCount &lt; nbPages){ //I'm running the loop for (nbPages - 1) times
  
                    for (i=2; i&lt;nbPages; i++){
                      APIService.getDetailedReportData($scope.start,$scope.limit).then(
                        function ({result,nbPages}) {
                          if (result.length){
                            $scope.results = $scope.results.concat(result);
                            requestCount ++;
                            console.log($scope.results, requestCount)
                            $scope.start += $scope.limit;
                          }
                        })
                    }
                  }
                }
              );
            };
  </code></pre>
  <p>this is my http calling function. it returns a promise</p>
  <pre class="lang-js prettyprint-override"><code>    var getDetailedReportData= function (start, limit) {
        $rootScope.isLoading = true;
        var deferred = $q.defer();
        $http
          .get(rootURL('/getAllReports/'+start+'/'+limit))
          .success(function (response) {
            deferred.resolve(response);
          })
          .catch(function (err) {
            deferred.reject(err);
          })
          .finally(function () {
            $rootScope.isLoading = false;
          });
        return deferred.promise;
      };
  
  </code></pre>
  <p>Help is much appreciated</p>