AngularJS extends HTML with new attributes called Directives. AngularJS has a set of built-in directives which you can use to add functionality to your application.

AngularJS ng-app Directive

The ng-app directive tells AngularJS that this HTML page is an AngularJS application. All AngularJS applications must have a ng-app directive. You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.

AngularJS ng-model Directive

The ng-model directive to bind data from the model to the view on HTML controls (input, select, textarea) to a variable created in AngularJS.

AngularJS ng-init Directive

The ng-init is used to initialize application data. Sometimes you may require some local data for your application, this can be done with the ng-init directive.

AngularJS ng-repeat Directive

The ng-repeat directive is used to repeats an HTML element.

<div ng-app="" ng-init="color=['Red','Green','Blue']">
<p>List of Colors:</p>
<ul> 
   <li ng-repeat="x in color">
      {{x}}
   </li>
</ul>
</div>

Example: The ng-repeat directive used on an array of objects.

<div ng-app ng-init="developer=[{name:'Tim Berners Lee', software:'HTML'}, {name:'Brendan Eich', software:'JavaScript'}, {name:'Misko Hevery', software:'AngularJS'}]">

<table> 
   <caption>List of Developers</caption>
   <tr>
      <th>Developer</th>
      <th>Technology</th>
   </tr>
   <tr ng-repeat="x in developer">
      <td>{{x.name}}</td>
      <td>{{x.software}}</td>
   </tr>
</table>

</div>