title: Wait for $http promise before the next request
body: <p>I'm working on an angularJS app and this is my first website using this framework. In my app i've a need to make a $http call inside a for loop. With in the loop before the next iteration I want to wait for the response from my previous call. What is the best and simple way to do this. I've tried using the callBack, $q.all(), .then in all of these only the last request is going through. Please help.</p>
  
  <p>Note: My API that i'm calling through $http can't queue requests.</p>
  
  <p><strong>Edit:</strong>
   I've tried both the below approaches, in both of the cases only the last request is being made successfully. Can you tell me what is wrong i'm doing here. </p>
  
  <p>Approach 1:</p>
  
  <pre><code>var promiseArray=[];
  
  for(var i=0;i&lt;items.length;i++)
  {
   var promise=services.Post(items[i]);
   promiseArray.push(promise);
  }
  
  $q.all(promiseArray).then(data)
  {
   ...
  }
  </code></pre>
  
  <p>Approach 2:</p>
  
  <pre><code>var promises = [];
  
  for (var i = 0; i &lt; items.length; i++) {
  
      var deffered = $q.defer();
      var promise = services.Post(items[i]);
      promise.success(function(data) {
          deffered.resolve(data);
      })
      promises.push(deffered);
  }
  </code></pre>
  
  <p>var result = $q.all(promises);</p>
  
  <p><strong>EDIT :2</strong> 
  Service Code:</p>
  
  <pre><code>Services.Post = function(lineItemId, submitUrl) {
      var url = (submitUrl) ? submitUrl : Services.serviceUrl;
  
      return $http.post(url, {
          "LineItemID": lineItemId
      }).
      success(function(data, status, headers, config) {
          Services.processResponse(data, status, headers, config);
      }).
      error(function(data, status, headers, config) {
  
          JL('Angular').error('Error response when calling Service ' + config);
  
      });
  };
  </code></pre>