AngularJS - API Call in a Loop - getting the max value of an array and setting a response

Question

This is my first time here, and I am really lost on what to do.

So I have a loop where I am making a post request to an API. I need to send some questions and get their rates match back. After that, I need to calculate the highest match and set an answer in some $scope variable to display on the screen. The problem I have is that, since the call is asynchronous, sometimes it will display the wrong answer (because it's the last response returned). I know it's asynchronous and I should have some callback, but I tried many ways and still can't figure out how to. All I want is to be able to "sort" the result so I can get the max number and display the associated answer AFTER all the calls are done. What I have so far is that:

for (var i = 0; i < $scope.possibleQuestions.length; i++) {
            var compare = compareAPI($scope.results, $scope.possibleQuestions[i].question,
                       $scope.possibleQuestions[i].answer,
                       $scope.possibleQuestions[i].keywords,
                       $scope.possibleQuestions[i].similar,
            function (score, question, answer, keywords, similar) {
                $scope.compareAPI = score.average;

                    if ($scope.compareAPI >= 0.6) {
                        realAnswer = answer;
                        questionsAskedCount++;
                        $scope.answer = realAnswer;  
                    } else {
                        var isMatch = matchKeywordAPI(question, keywords);
                        if (isMatch == 0) {
                            $scope.answer = "Please try asking another question!";
                        }
                        else {
                            //have to return a string just to know, bcause realAnswer is undefined in here, have to return callback function hahahahaha again, or set the answer in the match function
                            $scope.answer = realAnswer;
                        }

                    }
            });
        }

And the other function:

function compareAPI (possibleQuestion, possibleAnswer, fn) {
    console.log("compare API");

    var apiMatch = semanticService.getSemantic($scope.studentQuestion, possibleQuestion)
    apiMatch.then(function (result) {          
        fn(result.data, possibleQuestion, possibleAnswer);
        console.log(result.data);
    }, function(error){
        $scope.status = 'Unable to load question data: ' + error.message;
    });

}

My biggest problem is that this part

if ($scope.compareAPI >= 0.6) {
     realAnswer = answer;
     questionsAskedCount++;
     $scope.answer = realAnswer;  
     } else {
         var isMatch = matchKeywordAPI(question, keywords);
         if (isMatch == 0) {
            $scope.answer = "Please try asking another question!";
         }
         else {
            $scope.answer = realAnswer;
         }                        
}

is random because of the async, so if the wrong answer is the last response, it will go to the 'else' and the answer gets wrong.

Any help will be very appreciated!!! Thanks!

Answer 1

Promises can done sequentially by chaining them:

var promise = $q.when(null);

for (let i=0; i<promiseArray.length; i++) {
    promise = promise.then(function() {
        //return promise to chain
        return promiseArray[i];
    });
};

promise.then(function() {
    console.log("ALL Promises Done");
});

For more information, see AngularJS $q Service API Reference - Chaining Promises.