asynchronous calls inside for loop angularJs

Question

I'm trying to make a call to a function 'submittoServer' which is inside factory 'pService', which makes $http call and then broadcast the data. The call to the 'submittoserver' is happening inside a for loop. Problem here is that I couldn't see the actual call is being made until the last loop, which is sending only the last item, but as you see in the code below I want to update one particular variable after every call, can someone please suggest how can I don't that. I can't do call back here as I've other method that call this same factory function with different inputs.

for (var i = vr.lines.length - 1; i >= 0; i--) {

                    if (parseInt(vr.lines[i].id) === id && Boolean(vr.lines[i].IsVoided) != true) {
                        lineId = vr.lines[i].lineID;

                        pService.submitToServer(actionId, { "IData": id }, ineId)
                                linesRemoved = linesRemoved + 1;

                    }

                    if (linesRemoved === lineqty)
                    {
                        updateModel = true;
                    }
                }

Answer 1

The problem here is that your service is a promise to return data. Your function will keep looping and running before the promise is resolved. You need to refactor your loop to take this into account.

Either add a .then(fn(){}) to handle the resolve promise. Gather up all the changed lineIds and submit them all at once and (again) handle the resolved promise with a .then(fn(){}). Lastly, given you next set of code logic, you probably want to do something more like $q.all to wait on all promise(s) to resolve before moving forward (see Wait for all promises to resolve)

Example

before your for loop:

var self=this;
self.linesRemoved = 0; // or init as needed.

Inside your for loop.

pService.submitToServer(actionId,{data}).then(function(resp){
   self.linesRemoved++;  // shortcut, this does +1 to itself.
});

Why do you have update model? With Angular your data is two-way bound and should just react to it being changed.

Sample $http call with return in a service, this is a promise itself:

 return $http.post(url, data, { cache: true });

Use this in a controller like

service.callHttp(data).success(function(resp){
      self.linesRemoved++;
 }).error(function(resp){});

If you have to wait it might be better to hold all and wait until they are all finished.

var promises =[];
for(){
   promises.push(service.callHttp());
}
$q.all(promises).then(function(){  
     // do work if(self.linesRemoved==lineQty) 
     // update...  You can't evaluate until they are all finished right?
});