Angular.js $scope not binding after $http

Question

The UI binds but with {{total}} showing as -1 I do see the console log 'data came back'. Why dont I see 99 ?

myModule.controller('dashboardCtrl', ['$scope', '$http'
    , function ($scope, $http) {
        $scope.total=-1;
        $http.get('api/controlPanel/dashboard').success(function (data) {
            $scope = data.stats;
            $scope.total=99; // just to make sure the value changes
            console.log('data came back');
        });
    }
]);

I read a lot of blogs talking about $scope.$apply yet it is undefined. Any help would be appreciated

what does it read if you comment out '$scope = data.stats;'? — Manube
– Manube, Commented Mar 8, 2015 at 9:49
It is because of the asynchronous operation of the javascript. It executes your $scope.total and send a request to the server. Your html binds the -1 value. You need to delete the $scope.total = -1 and best practise is to use resolve method before you load the controller. — Alaksandar Jesus Gene
– Alaksandar Jesus Gene, Commented Mar 8, 2015 at 10:14

jnishiyama · Accepted Answer · 2015-03-08 09:52:54Z

2

My first inclination is that you are redefining the $scope object and so the bindings are not taking effect. I would try $scope.stats = data.stats instead to avoid this problem.

This might be good to read: https://docs.angularjs.org/guide/scope

Hope this helps!

answered Mar 8, 2015 at 9:52

jnishiyama

3972 silver badges9 bronze badges

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

1 Comment

Daniel_Madain Over a year ago

100% right. $scope carries a lot more than just data. By overriding it with my object I pretty much killed it.

Collectives™ on Stack Overflow

Angular.js $scope not binding after $http

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