element is the "owner" of an AngularJS **application**. ## Data Binding The **{{ firstName }}** expression in the example above is an AngularJS data binding expression. Data binding in AngularJS synchronizes AngularJS expressions with AngularJS data. **{{ firstName }}** is synchronized via **ng-model="firstName"**. In the next example, two text fields are synchronized via two ng-model directives: ## AngularJS Example [Try it Yourself »](#) |  | Using **ng-init** is not very common. You will learn a better way to initialize data in the Controllers chapter. | | --- | * * * ## Repeating HTML Elements The **ng-repeat** directive repeats an HTML element: ## AngularJS Example [Try it Yourself »](#) The **ng-repeat** directive used on an array of objects: ## AngularJS Example [Try it Yourself »](#) |  | AngularJS perfectly supports database CRUD (Create, Read, Update, Delete) applications. Think of the objects in the example as records in a database. | | --- | * * * ## The ng-app Directive The **ng-app** directive defines the **root element** of an AngularJS application. The **ng-app** directive will **auto-bootstrap** (automatically initialize) the application when the web page has loaded. Later you will learn how **ng-app** connects to a code module with a value (like ng-app="myModule"). * * * ## The ng-init Directive The **ng-init** directive defines **initial values** for an AngularJS application. Normally, you will not use ng-init. You will use a controller or module instead. You will learn more about controllers and modules later. * * * ## The ng-model Directive The **ng-model** directive **binds HTML elements** to application data. The ng-model directive can also: * Provide type validation for application data (number, email, required). * Provide state for application data (invalid, dirty, touched, error). * Provide CSS classes for HTML elements. * Bind HTML elements to HTML forms. * * * ## The ng-repeat Directive The **ng-repeat** directive **clones an HTML element** once for each item in a collection. * * * ## Creating Custom Directives In addition to the built-in directives, you can create your own custom directives. You can use the **.directive** function to add your own directives. To invoke a custom directive, you need to add the custom directive name as an attribute on an HTML element. Use camelCase to name a directive, **tutorialDirective**, but when invoking it, use a dash-separated name, **-directive**: ## AngularJS Example var app = angular.module("myApp", []); app.directive("tutorialDirective", function() { return { template : "

Custom Directive!

" }; }); [Try it Yourself »](#) You can invoke a directive by using: * Element name * Attribute * Class name * Comment The following examples produce the same result: Element name [Try it Yourself »](#) Attribute [Try it Yourself »](#) Class name [Try it Yourself »](#) Comment [Try it Yourself »](#) * * * ## Restricting Use You can restrict your directive to be invoked only in specific ways. ### Example By adding the **restrict** property and setting its value to `"A"`, you can restrict the directive to be invoked only as an attribute: var app = angular.module("myApp", []); app.directive("tutorialDirective", function() { return { restrict : "A", template : "

Custom Directive!

" }; }); [Try it Yourself »](#) The **restrict** value can be: * `E` for Element name * `A` for Attribute * `C` for Class name * `M` for Comment The default restrict value is `EA`, meaning the directive can be invoked as an Element or an Attribute.