JSON parsing error in angularjs when getting from server but not when static

Question

I have this plunker: http://plnkr.co/edit/FnCTfZf8RVBx2WVscyK8?p=info

if I change the line/s(around 23)

app.controller('MainCtrl', function($scope) {
    $scope.links = [...];
});

to

app.controller('MainCtrl', function ($scope, $http) {
            $http.get('data.json')
                .success(function(data, status, headers, config) {
                    $scope.links = data;
                });

I don't see any data.

I guess this happens because the data is set after the ui has already been rendered.
How do I make the data binding work corectlly?

Thanks

Answer 1

The issue you are facing is different reference of variables. i.e when you say

a = b

Then when you modify "b", "a" is not going to change. Hence, in ng-init you have just initialized with value

submenu = links

When "links" gets updated then "submenu" does not.

So, here you can setup watch on scope variable "links", which when updated you can update "submenu".

Please find the plunkr for the same.

Code:

$scope.$watch('links',function(newValue){
   $scope.submenu=newValue;
});