title: Angularjs asynchronous calls in a loop
body: <p>Below is the code I use in my project to allow user to upload file(s).
    For each file selected , "$scope.upload" function gets invoked asynchronously.</p>
  
  <p>Because these are asynchronous calls , each call does not depend on previous call.</p>
  
  <p>But my requirement is only after success call back function gets executed, 
    then the next upload should happen,because each upload depends on values
    returned by previous upload.</p>
  
  <p>Please let me know how it can be achieved.
    Note : $scope.upload is part angular file upload js (<a href="https://github.com/danialfarid/ng-file-upload" rel="nofollow">https://github.com/danialfarid/ng-file-upload</a>)</p>
  
  <pre><code>$scope.startUploading = function ($files, errFiles, item) {           
  
          //$files: an array of files selected
          for (var idx = 0; idx &lt; $files.length; idx++) {
              var $file = $files[idx];
  
  
              (function (index) {
                  $scope.upload[index] = $upload.upload({
                      url: "../UploadCommentAttachment",
                      method: "POST",
                      file: $file, 
                      data: item 
                  }).success(function (responseData, status, headers, config) {
  
                         item.AuditCommentAttachments.push(responseData);
                         item.CommentId = responseData.CommentId;
                         item.AuditId = responseData.AuditId;
                         item.Operation = "EDIT";
                         item.CommentAttachmentID = responseData.CommentAttachmentID;
                      }
  
                  });
              })(idx);
  
          }  ///-- for loop end         
      } // startuploading end
  </code></pre>