Difference between ng-model and data-ng-model

Question

I am new with the AngularJs. Can anyone say the difference between ng-model and data-ng-model?

With ng-model

First          


        

Answer 1

They are the same. Angular strips the data- part from the attribute. From the docs:

Angular normalizes an element's tag and attribute name to determine which elements match which directives... The normalization process is as follows:

1. Strip x- and data- from the front of the element/attributes.
2. Convert the :, -, or _-delimited name to camelCase.

Answer 2

while both ng-model and data-ng-model would work, HTML5 expects any custom attribute to be prefixed by data-.

<!-- not HTML5 valid -->
<input type="text" ng-model="name">

<!-- HTML5 valid -->
<input type="text" data-ng-model="name">

Answer 3

Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them.

Answer 4

There is no difference between ng-model and data-ng-model if you see in terms of AngularJs.

Actually, 'data' used as prefix to validate HTML5 validation. So, it is good practice to use data-ng-model, however, you can use ng-model as well. There is no problem in that also.

Both have the same meaning and both have the same output:

With ng-model

First Name  :  <input type="text" ng-model="fname" id="fname">
Second Name :  <input type="text" ng-model="lname" id="lname">  

With data-ng-model

First Name  :  <input type="text" data-ng-model="fname" id="fname">
Second Name :  <input type="text" data-ng-model="lname" id="lname">