HTML tags uses directives as attributes or custom tags.
It tells AngularJS's HTML compiler ($compile) to attach a behavior or transform that DOM elements (via event listener).
Its somehow complicated to understand but too easy in using. It is used to attaching Controllers and $scope objects.
By using directives we can achieve good functionality with writing less code.
Matching directive element in HTML by AngularJS's compiler.
<!-- input element matches ngModel directive -->
<!-- input element also matches ngModel directive -->
<!-- element matches custom directive person -->
Angular normalizes the directive attribute and element's name to match.
Read carefully and remember, AngularJS refers the directive name by case-sensitive camelCase in (example ngModel)
dash-delimited attributes in DOM elements (example ng-model).
The normalize process works in both ways to match the directive
1. Removes the "data-" from "data-ng-model" front-end attributes (HTML)
It is one of the main feature of AngularJS. It is automated synchronization of data between model and view.
Its changes the view (front-end) when model (beck-end) is changes. Don't ask how is it working?
It is dirty checks the previous values against the remembered values.
It is fire the change event when value is changed. So far as good to use when $scope data is small in size.
Otherwise it will degrade the performance.
<!-- AngularJS CDN -->
Name: <input type="text" name="Name" ng-model="name">