AngularJS: I can't view the scope created in the get

I've done two controllers:

One is a UsersCtrl where I do a $http.get() and I take all the users from a json. And when you click in on a User, you go in another page with another Controller (UsersDetailCtrl), where I've to use the $stateParams.id passed via the url, (that is ok) and check if there is an id which match in the $http.get.

I show you my UsersDetailCtrl and then I tell you my problem:

.controller('UsersDetailCtrl', function($scope, $http, $ionicModal, $window, $stateParams, $ionicLoading, $timeout) {
console.log($stateParams.id);
        $scope.loading = $ionicLoading.show({
          animation: 'fade-in',
          showDelay: 0,
          showBackdrop: true
    });
    var urlUtenti  = "users.json";
    $http.get(urlUtenti).success(function (response) {
        for (var i = 0; i < response.length; i++) {
            if (response[i].id == $stateParams.id) {
                $scope.user = response[i];
            }
          }
        $timeout(function(){
            $ionicLoading.hide();
        },1000);
        })
    console.log($scope.user);
})

Into the $http.get, precisely into the for clause, I have a $scope.user = response[i] where If I do a console.log(response[i]) or console.log($scope.user) INTO the for clause it's correct, I receive the Object that I want, BUT as you can see below, I've put the console.log($scope.user) in the end of the controller because I need to use that scope in the html view. The Result? undefined.

So why into the for clause it's all right and out of the http get it's not? How can I do to use the $scope.user in my html view?

P.S. I've already tried to make the scope an object and it return me a empty object.. same thing for the array. What is wrong with the scope?

Thanks.

As @Phil commented, $scope.user is set just fine (if there is one matching $stateParams.id, that is) - your "problem" in the console.log($scope.user) logging undefined is that it is executed too early.

The flow goes like this:

  • $http.get(urlUtenti).success(successFunction) -> HTTP GET starts executing asynchronously
  • console.log($scope.user) (outside successFunction) -> executes immediately (successFunction hasn't yet been invoked, so $scope.user is undefined at this point)
  • HTTP GET returns successfully -> successFunction is executed and $scope.user is set.

Try this:

.controller('UsersDetailCtrl', function($scope, $http, $ionicModal, $window, $stateParams, $ionicLoading, $timeout) {
    console.log($stateParams.id);
    $scope.loading = $ionicLoading.show({
        animation: 'fade-in',
        showDelay: 0,
        showBackdrop: true
    });
    var urlUtenti  = "users.json";
    $http.get(urlUtenti).success(function (response) {
        for (var i = 0; i < response.length; i++) {
            if (response[i].id == $stateParams.id) {
                $scope.user = response[i];
            }
        }
        // console.log moved INSIDE the success function (before timeout)
        console.log($scope.user);
        $timeout(function(){
            $ionicLoading.hide();
        },1000);
    })
})