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?

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?

• javascript
• angularjs

Share Improve this question Follow edited Jun 13, 2015 at 12:58 kumar kundan 2,05711 gold badge2929 silver badges4242 bronze badges asked Jun 13, 2015 at 12:17 Neil GarbNeil Garb 19711 silver badge1010 bronze badges 5

• 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 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 Commented Jun 13, 2015 at 12:24
• Can you provide mcve? – Andrey Commented Jun 13, 2015 at 12:28
• 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 Commented Jun 13, 2015 at 12:34
• Read about angular dot rule. – dfsq Commented Jun 13, 2015 at 12:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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" />