var app = angular.module('plunker', []);
app.run(function($q){
$q.each = function(promises){
var deferred = $q.defer();
promises.forEach(function(promise){
promise.then(function(data){
deferred.notify(data);
});
});
return deferred.promise;
};
});
app.controller('MainCtrl', function($scope, $q, $timeout) {
var promises = [
$timeout(a('a'), 1000),
$timeout(a('b'), 500),
$timeout(a('c'), 3000),
$timeout(a('d'), 1500),
];
$scope.values = [];
$scope.values.push('start - ' + new Date().toISOString());
$q.each(promises).then(null,null,function(data){
$scope.values.push(data + ' - ' + new Date().toISOString());
});
function a(v){ return () => v; }
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
<!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="val in values">{{val}}</li>
</ul>
</body>
</html>
/* Put your css in here */