AngularJS - Scope not applied in view within controller's function

Question

I'm trying to modify a variable inside $scope within a controller's function and the affectation works, but didn't apply in the view.

app.controller('LoginCtrl', ['$scope', '$http', function ($scope, $http) {

    $scope.test = "test";

    $scope.logIn = function() {
        // This changes the value to test2, but does not applies it to the view.
        $scope.test = "test2";
    };

}]);

In the login.html:

  DEBUG: {{ test }}

And the routeProvider:

$routeProvider
    .when('/', {
        templateUrl: '/views/login.html',
        controller: 'LoginCtrl'
    })

Is something I miss out the documentation ?

Thanks !

Can you please provide a Plunker with a demo of the problem. It's working for me: plnkr.co/edit/xbZWsE2i422BrDLDYXI3?p=preview — Wayne Ellery
– Wayne Ellery, Commented Dec 18, 2014 at 0:52
Please at least include the full HTML. No way to tell if you've assigned ng-controller or ng-app correctly. — Aweary
– Aweary, Commented Dec 18, 2014 at 0:58
Your code does not demonstrate that the logIn function is actually getting called to change value on the scope. — Enzey
– Enzey, Commented Dec 18, 2014 at 1:50

user2879704 · Accepted Answer · 2014-12-18 01:50:06Z

3

This happens because angular is not aware of the scope changes made by logIn function which i think is called asynchronously in your case. After calling logIn() asynchronously, force scope changes by

$scope.$apply()

answered Dec 18, 2014 at 1:50

user2879704

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

1 Comment

David Pearson Over a year ago

Where should it be placed ? Cause in this case, it means I have to apply every HTTP responses with it ?

KipLove · Accepted Answer · 2014-12-18 01:46:08Z

0

So I think this is a reference or inheritance issue that is known with primitives see this post https://github.com/angular/angular.js/wiki/Understanding-Scopes. Try this same code but put test inside an object like so:

$scope.viewModel = {};
$scope.viewModel.test = 'Test';

answered Dec 18, 2014 at 1:46

KipLove

1263 bronze badges

1 Comment

David Pearson Over a year ago

This doesn't fix my issue. Thank you anyway !

David Pearson · Accepted Answer · 2014-12-18 13:39:57Z

0

I found out that I put ng-controller="" in the HTML element that calls the logIn() function.

In fact, I called it twice and causes the view update to fail.

answered Dec 18, 2014 at 13:39

David Pearson

831 silver badge13 bronze badges

Collectives™ on Stack Overflow

AngularJS - Scope not applied in view within controller's function

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related