AngularJS wait for all async calls inside foreach finish

Question

I am looping through an array with angular.forEach and calling a non-angular ajax library (Trello client.js). The client does have 'success' and 'error' callbacks, but doesn't return an angular deferred. I would like to execute a function once all of the ajax calls have completed.

I have the following code:

$scope.addCards = function(listId)
            {
                var cardTitles = $scope.quickEntryCards[listId].split('\n');
                angular.forEach(cardTitles, function(cardTitle,key)
                {
                    Trello.post('/cards', {
                        name:cardTitle,
                        idList:listId
                    },function(){ }, function(){ });
                });
                //TODO: wait for above to complete...
                $scope.init($routeParams.boardId);  
                $scope.quickEntryCards[listId] = '';    
            };

What can I do at that //TODO and in the callback functions so that the last 2 lines only run after all the posts either succeed or fail?

Answer 1

pseudo code using angular's $q service.

requests = [];

forEach cardTitle
   var deferred = $q.defer();
   requests.push(deferred);
   Trello.post('/path', {}, deferred.resolve, deferred.reject);

$q.all(requests).then(function(){
    // TODO
});