Can't save http result to scope


#1

I have a json-file defined and I am trying to load in one of my controllers. I am using a factory to fetch the data:

.factory('myService', function($http) {

  var all_data = [];

    return {
      getAllData: function(){
        return $http.get('js/data/all_data.json').then(function(data) {
          all_data  = data;
          return all_data ;
      });
        }
    }
})

Later in my controller I call getAllData() in a loadData()-function:
.controller(‘QuizCtrl’,[’$scope’,’$state’,’$http’,‘myService’,function($scope,$state,$http,myService){

    // $scope.myData = []; <-- this makes the app freeze and not respond anymore
    $scope.loadData = function(){
      myService.getAllData().then(function(all_data){
          $scope.myData = all_data.data.all_data;
          alert($scope.myData);
      });
    }

    $scope.loadData();
    $scope.another_var = $scope.myData;

}])

As you can see first of all I am also calling loadData(). While debugging inside the function (see alert()) I can clearly see how the json has been loaded and applied to the $scope.myData variable.

Once I try to assign the variable to another variable (see $scope.another_var) myData is ‘undefined’.

What I tried was defining $scope.myData before the $scope.loadData() call (see comment in code). Unfortunately this simple variable declaration makes my app freeze completely. I have not found the reason for this yet. Also I am not sure if it is related to my overall problem.

I also tried to use $q but it did not change anything, afaik http.get already returns a promise.

So what have I missed? Why am I not able to store my “http get” result in my controller’s $scope?