title: Angular synchronous http loop to update progress bar
body: <p>I'm trying to update a progress bar with a sequential http request inside a foreach, this works, but it's not synchronous by on complete, progress bar is being sync'd by the http call, what am I doing wrong? </p>
  
  
  
  <pre><code>angular.forEach(queue, function (item) {
      if (item.uid) {
          d.item = item;
          $http({
              url: BASE_URL + 'upp', 
              method: 'post',
              data: d                  
          }).then(function(res){
              x++;
              update_progress((x/queue_count)*100);
          });
      }
  });
  </code></pre>
  
  <p>I would like to call the update_progress function just when the http returns as finished (200 OK), so the progress bar shows the actual progress correctly. Thanks!</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>I tried checking the response status, before calling the *update_progress* function and it still does not work as expected. I wasn't aware that 200 was dispatched before the request is completed :| By logic, the <strong>res</strong> obj shouldn't be the <em>response</em> of the http request? I mean, if it's 200 and not an error code, that shouldn't mean that the request was completed?</p>
  
  <pre><code>angular.forEach(queue, function (item) {
  if (item.uid) {
      d.item = item;
      $http({
          url: BASE_URL + 'upp', 
          method: 'post',
          data: d                  
      }).then(function(res){
          if(res.status == 200) {
            x++;
            update_progress((x/queue_count)*100);
          }
      });
  }
  </code></pre>
  
  <p>Reading more on promises atm to see if I can make it work as stated by @josh-strange</p>
  
  <p><strong>Edit 2</strong>:</p>
  
  <p>So promises was the way to do it, all requests are sent sequentially so the progress bar works as expected, here's the code:</p>
  
  <pre><code>var promise = $q.all({}); 
  // Had to init $q.all with an empty obj, 'cause null was trowing errors
  
  angular.forEach(queue, function(item){
    if (item.uid) {        
      promise = promise.then(function(){
        d.item = item;
        return $http({
          url: BASE_URL + 'upp', 
          method: 'post',
          data: d 
        }).then(function(res){
          x++;
          update_progress((x/queue_count)*100);
        });
      });
    }
  });
  
  promise.then(function(){
    end_js_update();
  });
  </code></pre>
  
  <p>Thanks @josh-strange </p>