AngularJS Use Input Value Attribute

Question

How can I direct AngularJS to assimilate the value attribute into the model? Any field that I give an ng-model attribute has its value immediately replaced with nothing, or whatever I define in the controller. Here's some code:

<form action="" method="post" ng-controller="PageCtrl">
    <input type="text" name="title" ng-model="title" value="Initial field value">
</form>

And the Javascript...

function PageCtrl($scope, Slug) {
    $scope.title = null;
}

I've tried not setting$scope.title, setting it to other things, but no matter what I do, the value is completely ignored. What can I do?

Answer 1

Yes, the value attribute is ignored by angularjs in favor of ng-model. It'd better just to remove value from your input entirely to avoid confusion.

The angular way of setting the default value would be to set $scope.title = 'Initial field value' inside your controller, and that's the preferable way to structure things as far as possible. If that's not possible then you can use ng-init on the input to do the same thing too, e.g.

 <input type="text" name="title" ng-model="title" ng-init="title = 'Initial field value'">