Currently, I am working on an Angular service that iterates through a list and makes web API calls to add or modify records in the database. The service operates on a small record set with a maximum of 10 records to update. After the loop completes, Angular reloads the state with some of the data updated. However, the list is fully updated only after refreshing the page. It seems like Angular is returning before the database finishes its operations. Is there a way for Angular to wait until all updates are made before returning?
Below is the code snippet showing how I iterate over the list (which contains a maximum of 10 items) and call the Angular service:
for (var i = 0, ii = $scope.Model.permissions.length; i < ii; i++) {
if ($scope.Model.permissions[i].New === true && !$scope.Model.permissions[i].Deleted) {
angularService.update($scope.Model.permissions[i]);
}
}
In previous projects, I used $q to wait for all promises to be resolved before executing a certain piece of code:
$q.all([$scope.Model.permissions.$promise,
$scope.Model.configurations.$promise
]).then(function () {
$scope.dataLoaded = true;
});
Each promise was assigned to the respective resource call:
$scope.Model.permissions = permissionFactory.fetch({ id: $stateParams.id);...However, it seems like this pattern may not work in my current scenario where I am looping over the list.
I would greatly appreciate any help or guidance on this matter!