Why Do i get null value in angularjs variable after http

Question

I am using Angularjs as frontend I have defined the variable ttest defined before $http call. after that i assign data to this variable .

the value ttest[0] has value in $http function but outside there is no value available there

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('AppCtrl', function($scope,$http,$log) {
    var imagePath = 'img/list/60.jpeg';

  var ttest=[];
var url = "https://www.w3schools.com/angular/customers.php";

$http.get(url).then(function(response) {
        ttest = response.data;
  $scope.messages =ttest
  $log.info(ttest[0]);

    });

  $log.info(ttest[0]);


  });

Answer 1

//Check the below comment ,you will find out what are you doing wrong 
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('AppCtrl', function($scope,$http,$log) {
    var imagePath = 'img/list/60.jpeg';

  var ttest=[];
var url = "https://www.w3schools.com/angular/customers.php";

$http.get(url).then(function(response) {
  //      ttest = response.data;
        ttest = response.records; <-- change data to records
  $scope.messages =ttest
  $log.info(ttest[0]);

    });

  $log.info(ttest[0]);


  });

Answer 2

The HTTP request you're making is asynchronous that means it is non blocking. So before your request is sent, the code below it executes. Do something like this:

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('AppCtrl', function($scope,$http,$log) {
    var imagePath = 'img/list/60.jpeg';

  var ttest=[];
var url = "https://www.w3schools.com/angular/customers.php";

$http.get(url).then(function(response) {
        ttest = response.data;
  $scope.messages =ttest
  $log.info(ttest[0]);

$scope.yourCallback(); // do whatever you want to do here in this function

    });

  }); 

Answer 3

In javascript scope of variable is functional. Since then is call back function , ttest wont be available outside of the scope.

You can create the function outside of the scope which updates ttest variable and call it from the then callback function.