AngularJS scope variable undefined

Question

I'm new to AngularJS and i have some trouble using scope variables.

Here's a sample code. I'd like to know why using ng-repeat it shows the values of $scope.currencies, but when i try to access from the JS (console.log($scope.currencies)) it returns "undefined"

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="appCtrl">

<ul>
  <li ng-repeat="x in currencies">
    {{ x }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope, $http) {
  $http.get("http://localhost:8080/currencies")
  .success(function (response) {$scope.currencies = response;});


  console.log("currencies are "+$scope.currencies);
});
</script>

</body>
</html>

I think there's something i'm getting wrong about scopes, could anyone give me a clue ?

Your console.log is running before the response from the $http.get can fire the .success method. At that point, $scope.currencies is still undefined. — Marcelo Myara
– Marcelo Myara, Commented May 26, 2015 at 13:13

Marcelo Myara · Accepted Answer · 2015-05-26 13:12:10Z

1

your console.log statement is outside the .success method. As such, it will run right away. You should put it inside the .success method, like this:

var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope, $http) {
  $http.get("http://localhost:8080/currencies")
  .success(function (response) {
      $scope.currencies = response;
      console.log("currencies are "+$scope.currencies);
  });
});

And also, try using $log.debug() instead of console.log().

app.controller('appCtrl', function($scope, $http, $log) {
...
  .success(function (response) {
      $scope.currencies = response;
      $log.debug("currencies are "+$scope.currencies);

answered May 26, 2015 at 13:12

Marcelo Myara

3,0212 gold badges30 silver badges37 bronze badges

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

5 Comments

mab Over a year ago

Thanks for the answer. Actually i think i haven't been explicit enough, i already tried what you suggest, and it worked well, but what i really want to do is to access $scope.currencies in my controller outside of the .success method (i used console.log just as a test). I think i didn't understand well how promises works, but for now, i'd be happy enough if i just understand how to access $scope.currencies from in the controller body whitout necessarily using angular directives to do so.

Marcelo Myara Over a year ago

Ok, let me try to help you again: You can use a scope attribute anytime you want. They should be bind with elements on your view (using the ng-data). Angular will take care on refreshing any element that is binded to an attribute to reflect any change on that attribute. To undestand it, you could just place a <span>{{currencies}}</span> anywhere on your page, and you would see it changing automatically everytime something changes the $scope.currencies value (as it would happen on the .success method).

Marcelo Myara Over a year ago

Thus, your console.log will not work to do what you expect (to "watch" that attribute) because it is going to run right away, and only once. It will get the value by the time it runs, but not after any changes on the attribute.

Marcelo Myara Over a year ago

And just one more thing: Is you currencies attribute filled with an array or a value?

mab Over a year ago

i understand the two way binding principle in Angular, but what i'm trying to do is a little bit different. Initially i had a function that was called on some event, and tried to customize binded s cope variables. However, when i use variables initialized in a $http.get call, it's only accessible from Angular directives, and undefined if called from anywhere else in my javascript controller. I guess i haven't make things clear by trying to simlify the case, sorry for that ! ^^

Collectives™ on Stack Overflow

AngularJS scope variable undefined

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related