Luis Lavieri Luis Lavieri - 2 months ago 5x
AngularJS Question

Using closure with a promise in AngularJS

I don't have a lot of experience with

JavaScript closures
AngularJS promises
. So, here is my scenario


I need to make
requests calls within a

(Obvious) problem

Even though the loop is done, my variables still have not been updated

Current implementation

function getColumns(fieldParameters)
return $http.get("api/fields", { params: fieldParameters });

for(var i = 0; i < $scope.model.Fields.length; i++)
var current = $scope.model.Fields[i];

fieldParameters.uid = $scope.model.Uid;
fieldParameters.type = "Columns";
fieldParameters.tableId = current.Value.Uid;
var promise = getColumns(fieldParameters);
current.Value.Columns =;
}, error);

//at this point current.Value.Columns should be filled with the response. However
//it's still empty

What can I do to achieve this?



If I understand your question correctly, you have a list of fields that you need to do some work on. Then when all of that async work is done, you want to continue. So using the $q.all() should do the trick. It will resolve when all of the list of promises handed to it resolve. So it's essentially like "wait until all of this stuff finishes, then do this"

You could try something like this:

var promises = [];

for(var i=0; i< $scope.model.Fields.length; i++) {
  var current = $scope.model.Fields[i];
  promises.push(getColumns(fieldParameters).then(function(response) {
    current.Value.Columns =;

return $q.all(promises).then(function() {
  // This is when all of your promises are completed.
  // So check your $scope.model.Fields here. 


Try this since you are not seeing the right item updated. Update your getColumns method to accept the field, the send the field in the getColumns call:

function getColumns(fieldParameters, field)
    return $http.get("api/fields", { params: fieldParameters}).then(function(response) {
field.Value.Columns =;


promises.push(getColumns(fieldParameters, $scope.model.Fields[i])...