I am facing a situation where I need to display results from different ajax sources, but they are loaded asynchronously. The problem is that I want the results to be sorted alphabetically once they are all loaded. ngRepeat doesn't sort them correctly when loaded asynchronously.
Is there a way to re-sort the results after all of them are loaded?
To demonstrate the issue with asynchronous loading and out-of-order results, I have created a plunkr example.
Here is a simplified example of what I'm trying to do:
// ngRepeat over $scope.prices in correct order
// all ajax loaded then $scope.prices assigned
var priority = ['1 Day', '3 Day', 'Ground'];
var prices = {};
for(var i = 0; i < priority.length; ++i) {
$http.get('some/endpoint/' + priority[i])
.then(function(response) {
prices[priority[i]] = response.data;
});
}
$scope.prices = {
'1 Day': prices['1 Day'],
'3 Day': prices['3 Day'],
'Ground': prices['Ground']
};
// ngRepeat over $scope.prices in order of successful load
// $scope.prices keys assigned as results are available
var priority = ['1 Day', '3 Day', 'Ground'];
for(var i = 0; i < priority.length; ++i) {
$http.get('some/endpoint/' + priority[i])
.then(function(response) {
$scope.prices[priority[i]] = response.data;
});
}