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?

Answer 1

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" />