Because `$location` uses getters/setters, you can use `ng-model-options="{ getterSetter: true }"`

to bind it to `ngModel`:

<file name="index.html">

<div ng-controller="LocationController">

<input type="text" ng-model="locationPath" ng-model-options="{ getterSetter: true }" />

### Example

<file name="index.html">

<form ng-controller="formsController">

<some-checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}"

you can use the {@link ngAria.$ariaProvider#config config} method. Just keep in mind this will

tell ngAria to ignore the attribute globally.

<file name="index.html">

<div ng-click="someFunction" show-attrs>

&lt;div&gt; with ng-click and bindRoleForClick, tabindex set to false

Below is a quick example of animations being enabled for `ngShow` and `ngHide`:

<file name="index.html">

<div ng-init="checked = true">

<label>

The example below shows how to perform animations during class changes:

<file name="index.html">

<p>

<input type="button" value="set" ng-click="myCssVar='css-class'">

Here is a directive which makes any element draggable. Notice the `draggable` attribute on the

`<span>` element.

<file name="script.js">

angular.module('drag', []).

directive('draggable', function($document) {

Here is a tab pane example built from components:

<file name="script.js">

angular.module('docsTabsExample', [])

.component('myTabs', {

string "very". Depending on which button is clicked, the `spice` model is set to `chili` or

`jalapeño`, and the message is automatically updated by data-binding.

<file name="index.html">

<div ng-controller="SpicyController">

<button ng-click="chiliSpicy()">Chili</button>

Controller methods can also take arguments, as demonstrated in the following variation of the

previous example.

<file name="index.html">

<div ng-controller="SpicyController">

<input ng-model="customSpice">

See [Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes) for

more information about scope inheritance.

<file name="index.html">

<div class="spicy">

<div ng-controller="MainController">

For example, the following forms are all equivalent and match the {@link ngBind} directive:

<file name="index.html">

<div ng-controller="Controller">

Hello <input ng-model='name'> <hr/>

Let's create a directive that simply replaces its contents with a static template:

<file name="script.js">

angular.module('docsSimpleDirective', [])

.controller('Controller', ['$scope', function($scope) {

If you are familiar with `ngInclude`, `templateUrl` works just like it. Here's the same example

using `templateUrl` instead:

<file name="script.js">

angular.module('docsTemplateUrlDirective', [])

.controller('Controller', ['$scope', function($scope) {

function, since the template is requested before the scope is initialized.

</div>

<file name="script.js">

angular.module('docsTemplateUrlDirective', [])

.controller('Controller', ['$scope', function($scope) {

Let's change our directive to use `restrict: 'E'`:

<file name="script.js">

angular.module('docsRestrictDirective', [])

.controller('Controller', ['$scope', function($scope) {

In its current implementation, we'd need to create a different controller each time in order to

re-use such a directive:

<file name="script.js">

angular.module('docsScopeProblemExample', [])

.controller('NaomiController', ['$scope', function($scope) {

outside, and then map the outer scope to a directive's inner scope. We can do this by creating what

we call an **isolate scope**. To do this, we can use a {@link $compile#-scope- directive's `scope`} option:

<file name="script.js">

angular.module('docsIsolateScopeDirective', [])

.controller('Controller', ['$scope', function($scope) {

We can show this by adding another property, `vojta`, to our scope and trying to access it from

within our directive's template:

<file name="script.js">

angular.module('docsIsolationExample', [])

.controller('Controller', ['$scope', function($scope) {

end-to-end testing, where we want to ensure that all `$timeout`s have completed before completing the test.

We also want to remove the `$interval` if the directive is deleted so we don't introduce a memory leak.

<file name="script.js">

angular.module('docsTimeDirective', [])

.controller('Controller', ['$scope', function($scope) {

To do this, we need to use the `transclude` option.

<file name="script.js">

angular.module('docsTransclusionDirective', [])

.controller('Controller', ['$scope', function($scope) {

To illustrate this, see the example below. Notice that we've added a `link` function in `script.js`

that redefines `name` as `Jeff`. What do you think the `{{name}}` binding will resolve to now?

<file name="script.js">

angular.module('docsTransclusionExample', [])

.controller('Controller', ['$scope', function($scope) {

Next, we want to add buttons to this dialog box, and allow someone using the directive to bind their

own behavior to it.

<file name="script.js">

angular.module('docsIsoFnBindExample', [])

.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {

For instance, what if we wanted to create a directive that lets a user drag an

element?

<file name="script.js">

angular.module('dragModule', [])

.directive('myDraggable', ['$document', function($document) {

Imagine you want to have a container with tabs in which the contents of the container correspond

to which tab is active.

<file name="script.js">

angular.module('docsTabsExample', [])

.directive('myTabs', function() {

{@link ng.$rootScope.Scope#$eval `$eval()`} method.

## Example

<file name="index.html">

<span>

1+2={{1+2}}

You can try evaluating different expressions here:

<file name="index.html">

<div ng-controller="ExampleController" class="expressions">

Expression:

It is possible to access the context object using the identifier `this` and the locals object using the

identifier `$locals`.

<file name="index.html">

<div class="example2" ng-controller="ExampleController">

Name: <input ng-model="name" type="text"/>

Event Object](http://api.jquery.com/category/events/event-object/) when jQuery is present or a

similar jqLite object.

<file name="index.html">

<div ng-controller="EventController">

<button ng-click="clickMe($event)">Event</button>

will stop recalculating once they are stable, which happens after the first digest if the expression

result is a non-undefined value (see value stabilization algorithm below).

<file name="index.html">

<div ng-controller="EventController">

<button ng-click="clickMe($event)">Click Me</button>

By this, the controller is able to call the filter only when needed (e.g. when the data is loaded from the backend

or the filter expression is changed).

<file name="index.html">

<div ng-controller="FilterController as ctrl">

<div>

The following sample filter reverses a text string. In addition, it conditionally makes the

text upper-case.

<file name="index.html">

<div ng-controller="MyController">

<input ng-model="greeting" type="text"><br>

If you however do need to write a stateful filter, you have to mark the filter as `$stateful`, which

means that it will be executed one or more times during the each `$digest` cycle.

<file name="index.html">

<div ng-controller="MyController">

Input: <input ng-model="greeting" type="text"><br>