Angularjs $http.get within loop

Question

I'm using angular.js with C# web service and I need to increment ng-repeat item by item to show to the user as the data is updated, to do this I'm trying to use $http.get within loop for refresh data in each item. But its not working

for (var i = 0; i < conditions.length; i++) {
        var configFullAsset = {
            params: {
                Field: Field,
                SAM_ConnectionString: SAM_ConnectionString,
                TreeElemId: conditions[i][0],
                ConditionDate: conditions[i][1]
            }
        };
        $http.get('application.asmx/getExtFullAssetHealth', configFullAsset)
            .success(function (responseExt) {
                console.log("Element: ", i);
                if (i == 0) 
                {
                    $scope.showData = responseExt;

                    $scope.fullAssetTable_loading = false;
                    $scope.fullAssetTable_loaded = true;
                }
                else
                    $scope.showData = $scope.showData.concat(responseExt);

                //console.log("Data item: ", $scope.showData[i].Tag);

                $scope.fullData = $scope.showData;
                $scope.filterData(customFilter);
            })
            .catch(function (err) {
                console.log("Error get object: ", err);
            })
            .finally(function () {
                // Hide loading spinner whether our call succeeded or failed.
                //$scope.loading = false;


                $scope.fullData = $scope.showData;
                $scope.filterData(customFilter);
                $scope.fullAssetTable_loading = false;
                $scope.fullAssetTable_loaded = true;

                console.log($scope.fullData);
            });
    }

Answer 1

The main problem into your code is the fallowing: you use i as index in the success method but is not what you expected because the loop is over until your first success will be called.

You can build the requests like this in the first phase, is much easier to read:

function buildRequests() {
    return conditions.map(function(condition) {
        var configFullAsset = {
            params: {
                Field: Field,
                SAM_ConnectionString: SAM_ConnectionString,
                TreeElemId: condition[0],
                ConditionDate: condition[1]
            }
        };

        return $http.get('application.asmx/getExtFullAssetHealth', configFullAsset);
    });
}

Than you can handle all the requests like this:

function handleRequests() {
    var requests = buildRequests();
    $q.all(requests)
        .then(handleRequests)
        .catch(function(error) {
            console.log(error);
        })
        .finally(function() {
            $scope.fullData = $scope.showData;
            $scope.filterData(customFilter);
            $scope.fullAssetTable_loading = false;
            $scope.fullAssetTable_loaded = true;
        });
}

Than to iterate over each result to make the changes:

function handleResults(results) {
    results.forEach(function(response, i) {
        console.log("Element: ", i);
        if (i == 0) 
        {
            $scope.showData = response;

            $scope.fullAssetTable_loading = false;
            $scope.fullAssetTable_loaded = true;
        }
        else
            $scope.showData = $scope.showData.concat(response);

        //console.log("Data item: ", $scope.showData[i].Tag);

        $scope.fullData = $scope.showData;
        $scope.filterData(customFilter);
    });
}

Do not forget to inject $q as dependency injection.