Can anyone explain why $scope.gotData is not accessible outside of the getData.success() call in the following AngularJS code? Although I can see the value of scope.gotData displayed in my view using {{gotData}} in my index.html, I'm unable to use $scope.gotData as a variable elsewhere in my controller. This question delves into the intricacies 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>