How to access data from $hhtp.get() in angularJS?

Question

JavaScript

Hello. The essence of the problem:

<div class="ng-scope" ng-init="init_func()" ng-controller="testCtrl">

var testApp = angular.module('testApp', []);
testApp.controller("testCtrl", ['$http', function($http){
        var store = this;
        store.init_func = function(){
                $http.get('/get_json_data')
                        .success(function(data){
                                store.my_data = data;
                        })        
        };
        console.log(store);
        console.log(store.my_data);
}]);

Console output:

Object { init_func=function()}
undefined

In the variant with scope, the situation is similar:

var testApp = angular.module('testApp', []);
testApp.controller("testCtrl", ['$scope', '$http', function($scope, $http){
        $scope.init_func = function(){
                $http.get('/get_json_data')
                        .success(function(data){
                                $scope.my_data = data;
                        })        
        };
        console.log($scope);
        console.log($scope.my_data);
}]);

Conclusion:

l { $$listeners={...}, $$listenerCount={...}, $id=2, ещё...}
undefined

The data is received correctly, there is access from the page. Console.log($scope.my_data); inside the callback works correctly.
Please explain what I do not understand, and how to access the data received via $http.get() from the controller?

Answer 1

You seem to have misunderstood how ajax requests work.
Synchronous requests are bad for performance, which is why Angular uses a mechanism similar to Promises.
Accordingly, the data will not come immediately and nothing correct will be displayed in the console.
The bottom line is that the request takes a certain time and the callback is called only when it is completed.
Roughly speaking, inside the callback, after the operations performed, you need to call scope.$apply() to apply the model changes and even then you can be sure that the data has arrived.

Answer 2

You need to call store.init_func.
Try like this:

var testApp = angular.module('testApp', []);
testApp.controller("testCtrl", ['$http', function($http){
        var store = this;
        store.init_func = function(){
                $http.get('/get_json_data')
                        .success(function(data){
                                store.my_data = data;
                        })        
        };
        store.init_func();
        console.log(store);
        console.log(store.my_data);
}]);

Answer 3

$scope.$watch 'my_data', (data) ->
    console.log($scope)
    console.log($scope.my_data)