Firefox sending multiple XHR requests when binding a controller function to the DOM

Question

I have the following function in my controller:

$scope.model.listApplicantStatuses = function(){
    var statusChoices = jobsService.getApplicantStatuses();

    if(statusChoices !== null)
            return statusChoices;

    //if($scope.model.listApplicantStatuses.inProgress)
    //  return;
    //$scope.model.listApplicantStatuses.inProgress = true;
    jobsService.fetchApplicantStatuses().then(function(data){
        jobsService.setApplicantStatuses(data.data);
        return data.data;
    },
    function(data){
        $scope.layout.showNotification('error', 10 * 1000, 'we are is experiencing technical difficulties <a href="mailto:support@" class="btn btn-danger">Contact Support</a>');
    });
}

corresponding service code:

jobsServ.fetchApplicantStatuses = function(){
    return $http.get(utils.getBaseUrl() + '/applications/status_choices', utils.getConfig());
}
jobsServ.getApplicantStatuses = function(){
    return that.applicantStatusChoices;
},
jobsServ.setApplicantStatuses = function(choices){
    that.applicantStatusChoices = choices;
},

Example DOM usage:

<select class="statusSelect" data-ng-model="model.editedApplicant[applicant.id].status" data-ng-show="layout.statusVisible(applicant.id) && !layout.statusLoader[applicant.id]" data-ng-options="key as val for (key, val) in model.listApplicantStatuses()" data-ng-change="model.updateStatus(applicant.id)"></select>

Now, the problem that I am having is that while chrome waits until the first function call completes, and then gives me the data that I get from the AJAX call, and returns undefined in the meanwhile, Firefox calls the function over and over again, creating a whole lot of uneeded XHR requests.

I commented out the code that was setting the inProgress $scope variable, a because it seems to much of a jQurish solution to me, and because that would force me to change my code in many places, and create another Boolean flag such as this per every request to the server.

Answer 1

I would expect the Firefox behaviour. Perhaps you should change the logic as:

// a variable to keep statuses, or a promise
$scope.applicantStatusList = $scope.model.listApplicantStatuses();

Change listApplicantStatuses() to return the promise:

$scope.model.listApplicantStatuses = function() {
    var statusChoices = jobsService.getApplicantStatuses();

    if(statusChoices !== null)
        return statusChoices;

    return jobsService.fetchApplicantStatuses().then(function(data){
        jobsService.setApplicantStatuses(data.data);
        return data.data;
    },
    function(data){
        $scope.layout.showNotification(...);
    });
};

And use the applicantStatusList in the <select>:

<select ... data-ng-options="key as val for (key, val) in applicantStatusList" ...></select>