What's the difference/incompatibility between ng-model and ng-value?

Question

As far as i understood ng-model sets the value for that particular element in which the model is been assigned. given that how is ng-value different from ng-model?

Answer 1

It works in conjunction with ng-model; for radios and selects, it is the value that is set to the ng-model when that item is selected. Use it as an alternative to the 'value' attribute of the element, which will always store a string value to the associated ng-model.

In the context of radio buttons, it allows you to use non-string values. For instance, if you have the radio buttons 'Yes' and 'No' (or equivalent) with values 'true' and 'false' - if you use 'value', the values stored into your ng-model will become strings. If you use 'ng-value', they will remain booleans.

In the context of a select element, however, note that the ng-value will still always be treated as a string. To set non-string values for a select, use ngOptions.

Answer 2

Simple Description

ng-model

1. Is used for two way binding of variable that can be available on scope as well as on html.
2. which has $modelValue(value reside in actual scope) & $viewValue (value displayed on view).
3. If you mentioned on form with name attribute then angular internally creates validation attributes for it like $error, $valid, $invalid etc.

Eg.

<input type="text/checkbox/radio/number/tel/email/url" ng-model="test"/> 

ng-value

1. Is used to assign value to respective ng-model value like input, select & textarea(same can be done by using ng-init)
2. ng-value does provide good binding if your are setting ng-model value through ajax while writing value attribute doesn't support it
3. Basically meant to use for radio & option tag while creating select options dynamically.
4. It can only have string value it, it doesn't support object value.

HTML

<input   [ng-value="string"]> ... </input> 

OR

<select ng-model="selected">   <option ng-value="option.value" ng-repeat="option in options">      {{option.name}}   </option> </select> 

...