Undefined Variable Inside Controller ($scope issue)

Question

All, I have the following AngularJS below. Why is $scope.gotData not visible outside of the call to getData.success()? Note that $scope.gotData is visible to the view: I can display the value of scope.gotData by placing {{gotData}} within my index.html.

Why can I not access $scope.gotData as a variable elsewhere in my controller? This is a question concerning the details of $scope.

getData.js

myApp.factory('getData',function($http){
return $http.jsonp('https://foo.com/bar.json')
       .success(function(data){
            return data;
        })
        .error(function(err){
            return err;
        });
});

MainController.js

myApp.controller('MainController', ['$scope','getData', function($scope, getData){
    getData.success(function(data){
        $scope.gotData = data;
    });

    $scope.gotData /* NOT DEFINED HERE */
   }]);

index.html

<html>
  <head>
    <script src="js/vendor/angular.js"></src>
  </head>
  <body ng-app="MyApp">
    <div ng-controller="MainController">
      {{gotData}} /* I CAN SEE THE DATA HERE */
     </div>
  </body>
</html>

fuzzybear3965 · Accepted Answer · 2015-07-12 19:47:31Z

4

the call to getData.success is asynchronous. So before executing that success function, your call to console of $scope.gotData is done. So you are supposed to define a default value of this $scope.gotData beforehand. And when you get a success call, only then you should use it. Something like this :

myApp.controller('MainController', ['$scope','getData', function($scope,getData){

    $scope.gotData = null;

    getData.success(function(data){
        $scope.gotData = data;
    });

    if($scope.gotData != null) 
        // Do something useful with this data
}]);

edited Jul 12, 2015 at 19:47

fuzzybear3965

2635 silver badges16 bronze badges

answered Jul 12, 2015 at 18:54

binariedMe

4,3291 gold badge20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fuzzybear3965 Over a year ago

So, does this mean that once the data has been retrieved that $scope.gotData is then defined? If the server responds fairly quickly then I should be able to setTimeout(console.log($scope.gotData),1000) outside of the call to getData.success to see the data, right?

nalinc Over a year ago

Yes..You'd be able to see the data if you use setTimeout(or $timeout service if you want to do thing more angular way). Provided you get the data within 1 second(1000 milliseconds)

nalinc · Accepted Answer · 2015-07-12 19:02:19Z

1

The reason why you cannot see $scope.gotData outside the getData.success() function is because .success() is async and the value is not available when you try to access it outside .success(). This essentially means that the promise has not been resolved yet.

Moreover, once angular's digest cycle identifies that $scope.gotData is populated, it quickly updates the view. Thats the reason why you can see $scope.gotData in the view

Things would be more clear once you put a watch on $scope.gotData

 myApp.controller('MainController', ['$watch','$scope','getData', function($watch,$scope, getData){
     getData.success(function(data){
        $scope.gotData = data;
     });

    $scope.$watch($scope.gotData,function(n,o){
       console.log("new val-> "+n);
       console.log("old val->"+o);
     })   
 }]);

edited Jul 12, 2015 at 19:02

answered Jul 12, 2015 at 18:56

nalinc

7,43327 silver badges34 bronze badges

3 Comments

fuzzybear3965 Over a year ago

So, the promise is only resolved when getData.success is called from the controller? I want to understand the "digest cycle" and these "promises" ($q). Do you have a good layman's resource for understanding what Angular is doing in the background?

nalinc Over a year ago

Well, yea. When the promise is resolved, .success is called, and when it is rejected, .error is called. You can get a better idea on promises from this link. Also, this and this are nice places to get started with $q. Here's the official docs on $q

fuzzybear3965 Over a year ago

I'll read those. I had already found the official documentation but the Angular API can be pretty opaque if you don't have a background in computer science. I'm reading on the $watch service right now. This site is pretty good.

Asad Imtiaz Butt · Accepted Answer · 2015-07-12 18:59:51Z

0

Although not the best programming practice, but a solution to this is to use $rootScope.

myApp.controller('MainController', ['$scope','getData', function($scope, getData){
    getData.success(function(data){
        $rootScope.gotData = data;
    });

    console.log($rootScope.gotData) // this will be accessible across
                                    // different controllers aswell
   }]);

answered Jul 12, 2015 at 18:59

Asad Imtiaz Butt

11 bronze badge

1 Comment

fuzzybear3965 Over a year ago

Thanks, Asad. I'm going to avoid using $rootScope. That's playing with fire.

Collectives™ on Stack Overflow

Undefined Variable Inside Controller ($scope issue)

getData.js

MainController.js

index.html

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

getData.js

MainController.js

index.html

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related