This will set the root element of the application. This can be put on any element, including the root HTML element.

This will automatically bootstrap Angular loading the module that is defined in ng-app.

This is used to bind variables in the controller's scope to input elements (text, select, or textarea). This will be a two-way binding, so any changes in the variable will update all occurrences of it.

Here is a simple example with text input:

<input ng-model="test" type="text"/>
  {{test}}

This allows you to disable an input easily through code. The expression can bind to a scope variable or just evaluate what is in the expression.

Here is a simple example that disables a text input:

<input ng-disabled="true" type="text"/>

This is the Angular way to check or uncheck a checkbox based on something in the controller.

Here is an example:

<input ng-checked="true" type="checkbox"/>

When the expression is a string or array, then the value of the string or the values of the array will be applied as classes to the element. These can be tied to variables in the scope, of course.

Here is an example of using a string to set the class. Here is the style that will be applied:

.double { font-size: 2em; }

Here is the code to apply it:

<div ng-class="classString">Text</div>
<input type="text" ng-model="classString" />

The class is tied to the value of the classString variable. The input is bound so that any change will update the class on div. Once you type in double, it will apply the style.

Here is an example using an object map. The object's property name is the class that will be applied and the value must be true. Here is a similar example utilizing the same class:

<div ng-class="{double: classString}">Text</div>
<input type="text" ng-model="classString" />

You will notice that once you type anything into the input, the class will be applied. This is because a non-blank string will be true. You can use this to apply as many classes as needed using more properties.

These two directives are related and can even be applied to the same element. If a repeated element is odd, then ng-class-odd will evaluate and the same is true for ng-class-even.

Here is an example that will make every odd element twice the size and every even element half the size. Here are the styles:

.odd { font-size: 2em; }
.even { font-size: .5em; }

Here are the elements. The ul attribute creates the data to be repeated, and each span parameter statically sets the class to either odd or even. You can use variables in scope as well:

<ul ng-init="numbers=[1,2,3,4]">
  <li ng-repeat="number in numbers">
  <span ng-class-even="'even'" ng-class-odd="'odd'">{{number}}</span>
  </li>
</ul>

Many times you will have data that has a similar template, but changes for each row of data. This is where ng-repeat comes in. The ng-repeat function will repeat the HTML that you have for each item in the repeat expression.

The repeat expression is an expression that tells ng-repeat what items are going to be looped over. Here is a rundown of some expressions:

Here is an example using an unordered list. Here is the controller:

firstModule.controller('SimpleController', ['$scope', function ($scope) { 
  $scope.items = [{id: 1, name: 'First' }, {id: 2, name: 'Second'}];
}]);

Here is the HTML for the controller:

<div ng-controller="SimpleController">
  <ul>
    <li ng-repeat="item in items track by item.id">
      ID: {{item.id}}
      Name: {{item.name}}
    </li>
  </ul>
</div>

These directives allow you to show or hide content based on the data in the scope.

Here is an example that uses a counter to show or hide elements. You can use ng-hide and use the opposite logic. Here is the controller:

firstModule.controller('SimpleController', ['$scope', function ($scope) {
  $scope.count = 0;
  $scope.increase = function () { $scope.count++; };
}]);

Next is the HTML:

<div ng-controller="SimpleController">
  <div ng-show="count == 0">Count is zero: {{count}}</div>
  <div ng-show="count > 0">Count is greater than zero: {{count}}</div>
  <button ng-click="increase()">Increase Count</button>
</div>

This directive works much like the JavaScript switch statement. Different cases are tested against, and the one that matches is used. If none of the cases match, then a default element is used.

Here is an example that jumps between even and odd. Here is the controller:

firstModule.controller('SimpleController', ['$scope', function ($scope) {
  $scope.count = 0;
  $scope.increase = function () { $scope.count++; };
}]);

Then comes the HTML:

<div ng-controller="SimpleController">
  <div ng-switch="count % 2">
    <div ng-switch-when="0">Count is Even: {{count}}</div>
    <div ng-switch-when="1">Count is Odd: {{count}}</div>
  </div>
  <button ng-click="increase()">Increase Count</button>
</div>

This directive allows you to run JavaScript on the click of an element. Usually, this is used with a function that is in the scope.

Here is an example that will increment a scope variable. First, here are the controller's scope variables:

$scope.counter = 0;
$scope.functionFromController = function (e) { $scope.counter++; };

Next, this is the element with the ng-click directive. In this example, you do not use the event object, but it demonstrates how to get it to the controller function:

<button ng-click="functionFromController($event)">Click Me!</button>
{{counter}}

This directive is very similar to ngClick. When the element is double-clicked, the expression will be evaluated.

This is an example of a div that will increment a counter when double-clicked. Here are the controller's variables:

$scope.counter = 0;
$scope.functionFromController = function (e) { $scope.counter++; };

Here is the element and directive:

<div ng-dblclick="functionFromController($event)">Double Click Me!</div>
{{counter}}

These are grouped together as they are all related. When the mouse takes the action (down, up, over, enter, or leave), the expression will be evaluated.

This example is a little crazy, but it demonstrates how to use these events. Here is the relevant portion of the controller:

$scope.counter = 0;
$scope.functionFromController = function (e) { $scope.counter++; };

Here are the directives:

<div ng-mousedown="functionFromController($event)" ng-mouseup="functionFromController($event)"
  ng-mouseenter="functionFromController($event)" ng-mouseleave="functionFromController($event)"
  ng-mouseover="functionFromController($event)">Mouse Over Me!</div>
{{counter}}

This fires when the mouse moves. Unless the directive is on the entire page, the event will be limited to only the element it is applied to.

Here is an example that will display the mouse's x and y coordinates. Here are the relevant scope variables:

$scope.x = 0;
$scope.y = 0;
$scope.functionFromController = function (e) {
  $scope.x = e.pageX;
  $scope.y = e.pageY;
};

Then comes the directive:

<div ng-mousemove="functionFromController($event)">Move the mouse to see the x and y coordinates!</div>
{{x}}
{{y}}

These will fire when the key is pressed or released.

Here is an example that will retrieve the key code from the key that was pressed down. Here are the relevant scope variables:

$scope.keyCode = 0;
$scope.functionFromController = function (e) {
  $scope.keyCode = e.keyCode;
};

Next comes the directive:

<input type="text" ng-keydown="functionFromController($event)"/>
Which key: {{keyCode}}

This directive is used to capture the submit event of a form. If the form does not have an action attribute, then this will prevent the form from reloading the current page.

Here is a simple example that logs the event object to console on submit. Here is the directive:

<form ng-submit="functionFromController($event)"><input type="submit" id="submit" value="Submit" /></form>

Next comes the controller code:

$scope.functionFromController = function (e) {
  console.log(e);
};

The ngFocus handler will fire when the element gains focus, and ngBlur will fire when it loses focus. Here is an example with a text input that logs the event to console:

<input type="text" ng-focus="functionFromController($event)"/>

Here is the controller code:

$scope.functionFromController = function (e) {
  console.log(e);
};

These are the events that will be fired when text is either cut, copied, or pasted. Here is an example that uses all three:

<input type="text" ng-cut="functionFromController($event)" ng-copy="functionFromController($event)" ng-paste="functionFromController($event)" />

Here is the controller code:

$scope.functionFromController = function (e) {
  console.log(e);
};