angular scope variable has no data

Question

I'm pretty new to angular js but it seems like my simple code should work. Here is the html:

    <body ng-app="MyHomepage">
    <div ng-controller="RedditLoad">
        {{a}}
        <ul>
            <li ng-repeat="article in a">
            {{article.data.title}}
            </li....

and here is my angualr_app.js:

    var App = angular.module('MyHomepage', [])
    function RedditLoad($scope){
        $.getJSON("http://www.reddit.com/.json?jsonp=?", function(data) {
            var data_array = []; 
            $.each(data.data.children, function(i,item){
                data_array.push(item);
            });
           console.log(data_array);
           $scope.a = data_array;
        });
    }

What am I doing wrong? console.log(data_array); is showing the correct values but the data wont seem to get passed to the template.

Yann · Accepted Answer · 2013-07-17 15:44:39Z

1

The getJSON callback isn't executed in the angular context so angular doesn't know about your changes and won't refresh the bindings. When code is called from an external source (like a jQuery event ), you have to encapsulate your scope changes in an $apply call:

$scope.$apply(function{ 
    $scope.a = data_array;
}

answered Jul 17, 2013 at 15:44

Yann

2,2311 gold badge15 silver badges14 bronze badges

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

1 Comment

user2295420 Over a year ago

Thank you. That explains alot. This fixed the issue.

Collectives™ on Stack Overflow

angular scope variable has no data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related