AngularJS promise not working

Question

I have a promise that runs without a problem when it runs during application start, e.g.

myPromise
    .success( function(data) { $scope.myvariable = data })
    .error( function(msg, code) { console.log("msg: " + msg + "\nCode" + code) });

However if I try to run the promise dynamically, let's say when a button is clicked, (1) the promise executes successfully but none of my variables are updated.

running apply or digest only produces the following error: $digest already in progress

$scope.getContent = function() {
        myPromise
            .success( function(data) { 
                $scope.myVariable = data; //THIS WORKS 
                console.log(data); //THIS WORKS
            })
    }
    //Running the below code afterwards still produces a null value 
    console.log($scope.myVariable);

The ng-click was placed inside a link, – Dennis Apr 07 '15 at 17:19 — Dennis, Apr 07 '15 at 17:19

score 1 · Accepted Answer · answered Apr 07 '15 at 07:08

This is what we called as async world.

When you are waiting for the callback of your promise the statement console.log($scope.myVariable); already executed but still you don't have any value in it.

In that case you can use $watch if you want to get it value outside.

$scope.$watch('myVariable',funciton(newVal){
 console.log(newVal);
});

Little Detail:-

myPromise is invoked and waiting for the response in the meanwhile the statement console.log($scope.myVariable); after it executed which obviously doen't have any value for $scope.myVariable inside it (nobody gave it :-P). So when response came back it call the success or error method and initialize the value to your variable $scope.myVariable and print it.

score 1 · Answer 2 · answered Apr 07 '15 at 07:11

1

Here your console.log($scope.myVariable); statement executes before success callback so here you need to do .then() chaining or apply watch on scope variable.

answered Apr 07 '15 at 07:11

Satyam Koyani

4,236
2
22
48

score 1 · Answer 3 · edited May 23 '17 at 11:50

The reason your console.log, which comes after your promise logs null is because it is executing before your promise returns. Even though the function using the promise has run, the success part of the code has not fired yet. The code hits the promise, makes the calls, creates the promise object, and moves on. When the promise returns, it fills in the empty promise object with the returned data. This is happening after your

 console.log($scope.myVariable);

A good way maybe to handle it is to store the returned value in a variable. Inside the success set the variable to the returned data, then use a function like

$scope.myVariable = undefined;
$scope.getContent = function() {
    myPromise
        .success( function(data) { 
            $scope.myVariable = data; //THIS WORKS 
            console.log(data); //THIS WORKS
        })
}
function checker() {
    if($scope.myVariable) {
         console.log($scope.myVariable); 
    }
}

Then you can call that function as needed.

Depending on what you are doing and when your getContent function needs to run, you may want to use this with ui-router, and use resolve, which will run these functions before the page loads, thereby ensuring you have data to work with when the DOM loads. AngularJS UI-Router: preload $http data before app loads

score 0 · Answer 4 · answered Apr 07 '15 at 07:08

0

I think promise object makes call only once,when controller is initialized

you have to reinitialize controller,to get new updated values from server

answered Apr 07 '15 at 07:08

Sanjay B

213
1
3
11

score 0 · Answer 5 · answered Apr 07 '15 at 08:53

A. Call sequence will be as follows when DOM ready: 1. $scope.getContent will get initialized. 2. then execution : console.log($scope.myVariable);

B. Async call: 1. If success then below statement will get executed. $scope.myVariable = data; //THIS WORKS

Above point A and B are independent. Execution is asyc here. Hope this will help you understand. Enjoy.

score 0 · Answer 6 · answered Apr 07 '15 at 09:05

Maybe this can help :

// a service providing data with async call
app.service('myService', function(elasticQuery) {
    this.getData = function (a,b,c) {
      // don't forget the 2 return 
      return elasticQuery.search({
         // make ajax call 
      }).then(function (response) {
         return response
      });
    };  
});


// in my controller 
// scope.getData is lunch with ng-click in the view
$scope.getData = function(a,b,c){
    myService.getData( a,b,c ).then(function (data) {
       $scope.myVariable  = data;          
    });
 };

AngularJS promise not working

6 Answers6