Angular callback when multiple http are done - angularjs

Question

How do I create 1 callback function for multiple http in angularjs. My code:
for (var i = 0; i < docs.length; i++) {
this.base64(docs[i], function(base64Img){
$http.post(urls.BASE + '/store',{doc:base64Img}).then(
function(result) {
console.log(result);
}
);
});
}
mycallback.call(); <-- this should be done when all my http.post above are done.

Answer 1

Use $q.all():
var deferred = $q.defer();
var httpPromises = [];
for (var i = 0; i < docs.length; i++) {
this.base64(docs[i], function(base64Img) {
httpPromises.push($http.post(urls.BASE + '/store',{doc:base64Img});
if (httpPromises.length === docs.length) {
deferred.resolve();
}
}));
}
return deferred.promise.then(function() {
return $q.all(httpPromises);
});
Note that if this.base64() returned a promise rather than taking a callback in argument, that would be simpler:
var promises = [];
for (var i = 0; i < docs.length; i++) {
promises.push(this.base64(docs[i]).then(function(base64Img) {
return $http.post(urls.BASE + '/store',{doc:base64Img});
}));
}
return $q.all(promises);
or even
return $q.all(docs.map(function(doc) {
return this.base64(doc).then(function(base64Img) {
return $http.post(urls.BASE + '/store',{doc:base64Img});
});
});

Answer 2

Okay so I created a HttpInterceptor Service for this so every time a request starts it checks if there are more requests within a certain timelimit and then after all of those requests responded It broadcasts "all requests done".
For that to work I embeded my Intercepter like this in my App.js
.config(function ($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
})
And my service looks like this basicly there is a variable numloadings which counts the requests up and when there is a respones it counts them down when it reaches 0 all requests went through
.factory('httpInterceptor', ['$q', '$rootScope', '$filter', function ($q, $rootScope, $filter) {
var canceller = $q.defer();
var numLoadings = 0;
var serialRequests = false;
var timeO;
var time1;
var Cntr1 = 0;
var Cntr2 = 0;
var currentReqUrl;
$rootScope.broadcast = true;
var loadingbar = { loading: "<progress value='?' max='10'></progress>" };
var loadingspinner = { loading: '<ion-spinner icon="crescent"></ion-spinner>' };
return {
request: function (config) {
config.timeout = 200000;
numLoadings++;
if (serialRequests == false) {
$rootScope.$broadcast("open_requests", loadingspinner);
} else {
clearTimeout(timeO);
}
}
return config || $q.when(config)
},
response: function (response) {
serialRequests = true;
numLoadings--;
timeO = setTimeout(function () {
serialRequests = false
if ((numLoadings) === 0) {
$rootScope.$broadcast("all_requests_done");
}
});
}
return response || $q.when(response);
},
responseError: function (response) {
serialRequests = true;
numLoadings--;
timeO = setTimeout(function () {
serialRequests = false
if ((numLoadings) === 0) {
$rootScope.$broadcast("all_requests_done");
}
});
}
return $q.reject(response);
}
};