XmVGpJ

index.html

<div ng-app="" ng-init="firstName='John'">'

  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
  
  <hr/>
  
  <p>The name is <span ng-bind="firstName"></span></p>
  
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

XmVGpJ.markdown

AngularJS Directives

The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

The ng-model Directive

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

The ng-model directive can also:

• Provide type validation for application data (number, email, required).
• Provide status for application data (invalid, dirty, touched, error).
• Provide CSS classes for HTML elements.
• Bind HTML elements to HTML forms.

The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

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.

The ng-repeat Directive

The ng-repeat directive clones HTML elements once for each item in a collection (in an array).

A Pen by Matt Rependa on CodePen.

License.