Angular JS Promise - Binding inside a forEach loop - arrays

Question

I am using angular.forEach to iterate over an array and for each value in the array, I am using a GET/ to retrieve it's name (array contains key), then push that name into another array. This new array is being used in a dropdown box (ngOptions).
The issue I am having is that the drop down is being created before the GET/ responses have arrived, so it just displays blank options, then when they arrive it displays all options in each drop down.
I have the following code:
angular.forEach($scope.pots, function(value, key) {
$scope.selections = [];
angular.forEach(value, function(val, ky) {
if (ky === "selections") {
angular.forEach(val, function(v, k) {
$http.get('/selections/' + v).then(function(response) {
var response = response.data;
$scope.selection = response[0];
$scope.selectionName = $scope.selection.name;
$scope.selections.push({name : $scope.selectionName});
value["selectionNames"] = $scope.selections;
})
})
}
})
value["selectionNames"] = $scope.selections;
console.log(value);
So I am iterating over a list of pots which contains a list of selections, using the GET/ to get a list of names based on the list of selections and finally pushing that into the pot's scope. I am resetting the selection after each pot.
What's causing the issue is that reponses all come at once, and they bypass the $scope.selections = []; code, so it just pushes into each pot the complete array from all three pots.
Any tips/advice please? Thank you.

Answer 1

So looks like I've fixed it... Can someone confirm that this is good practice please? I'm basically recreating $scope.selections each time I iterate based on the selectionNames value in the pot (value).
angular.forEach($scope.pots, function(value, key) {
$scope.selections = [];
angular.forEach(value, function(val, ky) {
if (ky === "selections") {
angular.forEach(val, function(v, k) {
$http.get('/selections/' + v).then(function(response) {
$scope.selections = [];
var response = response.data;
$scope.selection = response[0];
$scope.selectionName = $scope.selection.name;
var currentSelections = value.selectionNames;
angular.forEach(currentSelections, function(csV, csK) {
$scope.selections.push(csv);
})
$scope.selections.push({name : $scope.selectionName});
value["selectionNames"] = $scope.selections;
})
})
}
})
value["selectionNames"] = $scope.selections;
console.log(value);