Difference between data-ng-model and ng-model in AngularJS

HTML 5 has introduced data attribute. With the prefix of data- we can create custom data attributes such as

<div id="info" data-user-name="Ram" data-user-city="Varanasi"></div>

In JavaScript and and CSS, we can access these values with attribute names data-user-name and data-user-city.  In JavaScript, we access as follows.

var info= document.getElementById("info");

var name = info.getAttribute("data-user-name");

var city = info.getAttribute("data-user-city");

In jQuery,  we can ignore data- prefix

var info = $("#info");

var name = info.data("user-name");

var city = info.data("user-city");

1. In HTML 5 data-* attributes are used to store private data which gives no HTML validation error. 

2. Search engines ignore these attributes. 

3. AngularJS has custom attributes like  ng-app, ng-controller, ng-model. To get the advantage of HTML 5 data- attribute, we can prefix AngularJS attributes such as data-ng-app, data-ng-controller, data-ng-model.

4. For AngularJS there is no difference between ng-app and data-ng-app or ng-controller and data-ng-controller or ng-model and data-ng-model because while compiling HTML page, AngularJS strips data- or x- prefix. Find the URL for reference.

5. For AngularJS there is no difference between the below lines

    <input ng-model="user.name" /> 

    and

   <input data-ng-model="user.name" />

But data-ng-model is HTML 5 compatible.