why does value attribute in html doesn't work when used with ng-model in angularjs?

Question

I am new to angularjs. Trying to use it to build simple applications. I have a textbox in html with a default initial value of "Abc".

<input type="text" value="Abc">

Now, I want to fetch the value which is there in textbox. For that I am using ng-model directive.

<input type="text" ng-model="demo" value="Abc">

But as soon as I enter ng-model directive in input, the default value in text box disappears and it shows a blank textbox. Any ideas why?

You need to initialize your model instead of using value. check out this q&a: http://stackoverflow.com/questions/13769732/angular-js-init-ng-model-from-default-values — Reza Owliaei, Mar 11 '15 at 09:09

score 2 · Accepted Answer · answered Mar 11 '15 at 09:13

That is the desired functionality - Angular way

<input type="text" ng-model="demo" value="Abc">

function Main($scope) {
  $scope.demo = 'Abc';
}

Another workaround is by using ng-init:

<input type="text" ng-model="demo" ng-init="demo='Abc'" value="Abc">

1 Answers1