Scope not updating after $http AJAX call

Question

The following code is in my controller - when I reach the console.log() line, nothing is printed out. The AJAX call returns a valid array. I tried using $scope.$apply but I got an process already in progress error, I'm assuming because using $http automatically starts the digest cycle:

var mmyApp = angular.module('myApp',['ui.bootstrap']).controller('TasksController',  TasksController);
 function TasksController($scope, $http) {
$scope.transactions = [];
$http.get('transactions').then(function (response) {
             $scope.transactions = response.data;     
     }, function (error) {
         throw error;
     });
console.log($scope.transactions);
}

score 2 · Answer 1 · answered Jan 06 '17 at 20:32

$http.get is asynchronous. When you call your console.log, your GET request didn't return yet. You can move it inside the handle body to see that it works:

$http.get('transactions').then(function (response) {
             $scope.transactions = response.data;     
             console.log($scope.transactions);
     }, function (error) {
         throw error;
     });

score 1 · Answer 2 · answered Jan 06 '17 at 20:33

You should know that AJAX calls made with $http in AngularJS are asynchronous, that is, they do not run in sequence with the rest of the code, unless you set it that way.

Therefore when the console.log is executed, the request still has not finished processing. The correct thing is that you run console.log after performing the assignment of the variable in the AJAX call, in this way:

var mmyApp = angular.module('myApp',['ui.bootstrap']).controller('TasksController',  TasksController);
function TasksController($scope, $http) {

    $scope.transactions = [];

    $http.get('transactions').then(function (response) {
        $scope.transactions = response.data;
        console.log($scope.transactions);     
    }, function (error) {
        throw error;
 });
}

Scope not updating after $http AJAX call

2 Answers2