AngularJS: Model not updating in controller scope

Question

I have the following controller:

app.controller('MyCtrl', function($interval, $scope) {
    $scope.foo = 2;
    $interval(function() {
        console.log($scope.foo);
    }, 1000);
});

And the following code in my view:

<input type="text" ng-model="foo" />

When I load the page, the input is correctly populated with the value "2". However, if I change the value in the input, the console continues to log "2" (without quotes).

I've used an $interval just to illustrate - with $watch() the callback only fires once and then never again. If I use ng-change="" on the input, then $scope.foo in the callback is always equal to 2.

What am I doing wrong?

Nothing wrong with this fragment of code, you've wrote. Check example: plnkr.co/edit/vaK63tDaBhnVLk4rC11z?p=preview. How do you instantiating your controllers and app? — Andrey
– Andrey, Commented Jun 13, 2015 at 12:22
@Andrey I use $routeProvider to create a route to MyCtrl: $routeProvider .when('/my', { templateUrl: 'tpl/my.html', controller: 'MyCtrl' }) And app is instantiated as var app = angular.module('app', ['ngRoute', 'ngCookies']); — Neil Garb
– Neil Garb, Commented Jun 13, 2015 at 12:24
This is a small part of a larger ng app, but judging by the fact that your plunker worked, I think there's something else somewhere in app which is interfering. — Neil Garb
– Neil Garb, Commented Jun 13, 2015 at 12:34

Community · Accepted Answer · 2017-05-23 12:18:11Z

13

If you use ng-model, you have to have a dot in there .

Bind model by creating a object like this

controller

$scope.form={
   foo:0
};

view

<input type="text" ng-model="form.foo" />

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jun 13, 2015 at 12:26

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

5 Comments

Neil Garb Over a year ago

That works great. Are you able to explain to me what made you suggest this?

Anik Islam Abhi Over a year ago

sometimes angular push scope in upper layer in your controller scope. if you bind direct varable into model then this variable can be add into newly added scope by which is current scope. but if you use bind by object property then whatever scope may push by angular the relation between object doesn't break

Eric McCormick Over a year ago

@NeilGarb A decent blog post from a while back covers 5 AngularJS Anti-Patterns and Pitfalls. The first on the list is forgetting the dot.

Sanjay Gupta Over a year ago

You saved my time brother.

mortb Over a year ago

THANKS! I'm maintaining an old angular application. I introduced a new property in the scope and I've been struggling for weeks to understand why my property did not update. I created an object and put the property as a child on that object; now all works!

Collectives™ on Stack Overflow

AngularJS: Model not updating in controller scope

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related