function calls in angular JS controller are executed in random order

Question

app.controller('attributeFormCtrl', ['$scope', '$route', '$log', '$modalInstance', 'attributeService', function($scope, $route, $log, $modalInstance, attributeService) {

    $scope.someMethod = function(){
        attributeService.getAllAttributeTypes().then(function(response){
            $scope.attributeTypes=response.data;
            }, function(error){
                // some error occurred
        });

        attributeService.getAttributeById($scope.attributeId).then(function(response){
            $scope.attribute=response.data;
        },function(error) {
            // error occurred.
        });
    };

    $scope.cancel = function() {
          $modalInstance.close();
    };

    $scope.someMethod();
}]);

when i debug on chrome, sometimes getAttributeById is called first and sometimes getAllAttributeTypes.......this might be a stupid question but i am new to angular! — Sachin Sharma
– Sachin Sharma, Commented Sep 24, 2015 at 11:34

jValdron · Accepted Answer · 2015-09-24 11:38:41Z

2

You're using asynchronous methods that returns a promise. Depending on a ton of factors, one might finish before the other, as you've found out.

If you need one to execute before the other, you can call one before the other, and then call the other within the callback function, as such:

$scope.someMethod = function(){
    attributeService.getAllAttributeTypes().then(function(response){
        $scope.attributeTypes=response.data;

        attributeService.getAttributeById($scope.attributeId).then(function(response){
            $scope.attribute=response.data;
        },function(error) {
            // error occurred.
        });
    }, function(error){
        // some error occurred
    });
};

That way you'll always be sure of which one finishes first.

answered Sep 24, 2015 at 11:38

jValdron

3,4181 gold badge31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sachin Sharma Over a year ago

i just did exactly that before coming here, thanks a lot for the explanation :)

Jacques Cornat · Accepted Answer · 2015-09-24 11:38:47Z

1

There is no random in JavaScript.

In your case, getAllAttributeTypes function is called first, then getAttributeById, BUT, the .then() means there is a callback and function getAllAttributeTypes will take sometimes more time than the second one, that's why $scope.attributeTypes=response.data; is called after $scope.attribute=response.data; in some cases.

This is not an Angular specificity, but a JavaScript one.

answered Sep 24, 2015 at 11:38

Jacques Cornat

1,6521 gold badge20 silver badges35 bronze badges

1 Comment

Sachin Sharma Over a year ago

thanks for explaining that. i wanted to call them in a specific order.... i did what jValdron suggested(though i did that before looking at the answer :p ) :)

Collectives™ on Stack Overflow

function calls in angular JS controller are executed in random order

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related