Angular Js Directives v.1.3.0 Cheat Sheet by Roman

Modifies the default behavior of the html A tag so that the default action is prevented when the href attribute is empty.
Priority level: 0
Example:

<a href="" ng-cli­ck=­"­lis­t.a­ddI­tem­()">Add Item</­a>

Submitting a form and preventing the default action.
CSS classes:
ng-valid is set if the form is valid.
ng-invalid is set if the form is invalid.
ng-pri­stine is set if the form is pristine.
ng-dirty is set if the form is dirty.
ng-sub­mitted is set if the form was submitted.

Use this directive to auto-b­oot­strap an AngularJS applic­ation. The ngApp directive designates the root element of the applic­ation and is typically placed near the root element of the page - e.g. on the <bo­dy> or <ht­ml> tags.
ngApp - {angul­ar.M­odule} - an optional applic­ation module name to load.
ngStrictDi (optional) - {boolean} - if this attribute is present on the app element, the injector will be created in "­str­ict­-di­" mode. This means that the applic­ation will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minifi­cat­ion), as described in the Dependency Injection guide, and useful debugging info will assist in tracking down the root of these bugs.

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expres­sion, and to update the text content when the value of that expression changes.
ngBind - {expre­ssion} - Expression to evaluate.

Creates a binding that will innerHTML the result of evaluating the expression into the current element in a secure way. By default, the innerH­TML-ed content will be sanitized using the $sanitize service. To utilize this functi­ona­lity, ensure that $sanitize is available, for example, by including ngSanitize in your module's depend­encies (not in core Angular.) You may also bypass saniti­zation for values you know are safe. To do so, bind to an explicitly trusted value via $sce.t­rus­tAs­Html. See the example under Strict Contextual Escaping (SCE).
ngBindHtml - {expre­ssion} - Expression to evaluate.

The ngBind­Tem­plate directive specifies that the element text content should be replaced with the interp­olation of the template in the ngBind­Tem­plate attribute. Unlike ngBind, the ngBind­Tem­plate can contain multiple {{ }} expres­sions. This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.
ngBind­Tem­plate - {string} - template of form {{ expression }} to eval.

Specify custom behavior on blur event.
Note: As the blur event is executed synchr­onously also during DOM manipu­lations (e.g. removing a focussed input), AngularJS executes the expression using scope.$­ev­alAsync if the event is fired during an $apply to ensure a consistent state.
ngBlur - {expre­ssion} - Expression to evaluate upon blur. (Event object is available as $event)

Evaluate the given expression when the user changes the input. The expression is evaluated immedi­ately, unlike the JavaScript onchange event which only triggers at the end of a change (usually, when the user leaves the form element or presses the return key).
Note, this directive requires ngModel to be present.
ngChange - {expre­ssion} - Expression to evaluate upon change in input value.

The HTML specif­ication does not require browsers to preserve the values of boolean attributes such as checked. (Their presence means true and their absence means false.) If we put an Angular interp­olation expression into such an attribute then the binding inform­ation would be lost when the browser removes the attribute. The ngChecked directive solves this problem for the checked attribute. This comple­mentary directive is not removed by the browser and so provides a permanent reliable place to store the binding inform­ation.
Argument:
ngChecked - {expre­ssion} - If the expression is truthy, then special attribute "­che­cke­d" will be set on the element

The ngClass directive allows you to dynami­cally set CSS classes on an HTML element by databi­nding an expression that represents all classes to be added.
The directive operates in three different ways, depending on which of three types the expression evaluates to:
- If the expression evaluates to a string, the string should be one or more space-­del­imited class names.
- If the expression evaluates to an array, each element of the array should be a string that is one or more space-­del­imited class names.
- If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corres­ponding key is used as a class name.

The directive won't add duplicate classes if a particular class was already set.

When the expression changes, the previously added classes are removed and only then the new classes are added.

Animat­ions:
add - happens just before the class is applied to the element remove - happens just before the class is removed from the element

Arguments:
ngClass - {expre­ssion} - Expression to eval. The result of the evaluation can be a string repres­enting space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

The ngClassOdd and ngClas­sEven directives work exactly as ngClass, except they work in conjun­ction with ngRepeat and take effect only on odd (even) rows.
Usage:
as attribute:
<ANY
ng-cla­ss-­eve­n="">
...
</A­NY>
as CSS class:
<ANY class=­"­ng-­cla­ss-­even: ;"> ... </A­NY>

Arguments
ngClas­sEven | ngClassOdd - {expre­ssion} - Expression to eval. The result of the evaluation can be a string repres­enting space delimited class names or an array.

The ngClick directive allows you to specify custom behavior when an element is clicked.
Arguments:
ngClick - {expre­ssion} - Expression to evaluate upon click. (Event object is available as $event)

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncom­piled) form while your applic­ation is loading. Use this directive to avoid the undesi­rable flicker effect caused by the html template display.

The ngCont­roller directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-­Vie­w-C­ont­roller design pattern.
MVC components in angular:
Model — Models are the properties of a scope; scopes are attached to the DOM where scope properties are accessed through bindings.
View — The template (HTML with data bindings) that is rendered into the View.
Controller — The ngCont­roller directive specifies a Controller class; the class contains business logic behind the applic­ation to decorate the scope with functions and values

Arguments
ngCont­roller - {expre­ssion} - Name of a constr­uctor function registered with the current $contr­oll­erP­rovider or an expression that on the current scope evaluates to a constr­uctor function. The controller instance can be published into a scope property by specifying ng-con­tro­lle­r="as proper­tyN­ame­". If the current $contr­oll­erP­rovider is configured to use globals (via $contr­oll­erP­rov­ide­r.a­llo­wGl­oba­ls()), this may also be the name of a globally accessible constr­uctor function (not recomm­ended).

Specify custom behavior on copy event.
Arguments:
ngCopy - {expre­ssion} - Expression to evaluate upon copy. (Event object is available as $event)

Enables CSP (Content Security Policy) support.

This is necessary when developing things like Google Chrome Extens­ions.

CSP forbids apps to use eval or Functi­on(­string) generated functions (among other things). For Angular to be CSP compatible there are only two things that we need to do differ­ently:

- don't use Function constr­uctor to generate optimized value getters
- don't inject custom stylesheet into the document

AngularJS uses Functi­on(­string) generated functions as a speed optimi­zation. Applying the ngCsp directive will cause Angular to use CSP compat­ibility mode. When this mode is on AngularJS will evaluate all expres­sions up to 30% slower than in non-CSP mode, but no security violations will be raised.

Specify custom behavior on cut event.
ngCut - {expre­ssion} - Expression to evaluate upon cut. (Event object is available as $event)

Specify custom behavior on keydown event.
Arguments:
ngKeydown - {expre­ssion} - Expression to evaluate upon keydown. (Event object is available as $event and can be interr­ogated for keyCode, altKey, etc.)

Specify custom behavior on keypress event.
Arguments:
ngKeypress - {expre­ssion} - Expression to evaluate upon keypress. (Event object is available as $event and can be interr­ogated for keyCode, altKey, etc.)

Specify custom behavior on keyup event.
Arguments:
ngKeyup - {expre­ssion} - Expression to evaluate upon keyup. (Event object is available as $event and can be interr­ogated for keyCode, altKey, etc.)

Text input that converts between a delimited string and an array of strings. The default delimiter is a comma followed by a space - equivalent to ng-lis­t=", ". You can specify a custom delimiter as the value of the ngList attribute - for example, ng-lis­t=" | ".

Arguments:
ngList (optional) - {string} - optional delimiter that should be used to split the value.

The ngModel directive binds an input,­select, textarea (or custom form control) to a property on the scope using NgMode­lCo­ntr­oller, which is created and exposed by this directive.

Allows tuning how model updates are done. Using ngMode­lOp­tions you can specify a custom list of events that will trigger a model update and/or a debouncing delay so that the actual update only takes place when a timer expires; this timer will be reset after another change takes place.
Arguments:
ngMode­lOp­tions - {Object} - options to apply to the current model. Valid keys are:
updateOn: string specifying which event should be the input bound to. You can set several events using an space delimited list. There is a special event called default that matches the default events belonging of the control.
debounce: integer value which contains the debounce model update value in millis­econds. A value of 0 triggers an immediate update. If an object is supplied instead, you can specify a custom value for each event. For example: ng-mod­el-­opt­ion­s="{ updateOn: 'default blur', debounce: {'defa­ult': 500, 'blur': 0} }"
getter­Setter: boolean value which determines whether or not to treat functions bound to ngModel as getter­s/s­etters.
timezone: Defines the timezone to be used to read/write the Date instance in the model for <input type="d­ate­"­>, <input type="t­ime­"­>, ... . Right now, the only supported value is 'UTC', otherwise the default timezone of the browser will be used.

The ngMous­edown directive allows you to specify custom behavior on mousedown event.
Arguments:
ngMous­edown - {expre­ssion} - Expression to evaluate upon mousedown. (Event object is available as $event)

Specify custom behavior on mouseenter event.
Arguments:
ngMous­eenter - {expre­ssion} - Expression to evaluate upon mousee­nter. (Event object is available as $event)

Specify custom behavior on mouseleave event.
Arguments:
ngMous­eleave - {expre­ssion} - Expression to evaluate upon mousel­eave. (Event object is available as $event)

Specify custom behavior on mousemove event.
Arguments:
ngMous­emove - {expre­ssion} - Expression to evaluate upon mousemove. (Event object is available as $event)

Specify custom behavior on mouseover event.
Arguments:
ngMous­eover - {expre­ssion} - Expression to evaluate upon mouseover. (Event object is available as $event)

Specify custom behavior on mouseup event.
Arguments:
ngMouseup - {expre­ssion} - Expression to evaluate upon mouseup. (Event object is available as $event)

The ngNonB­indable directive tells Angular not to compile or bind the contents of the current DOM element. This is useful if the element contains what appears to be Angular directives and bindings but which should be ignored by Angular. This could be the case if you have a site that displays snippets of code, for instance.

The HTML specif­ication does not require browsers to preserve the values of boolean attributes such as open. (Their presence means true and their absence means false.) If we put an Angular interp­olation expression into such an attribute then the binding inform­ation would be lost when the browser removes the attribute. The ngOpen directive solves this problem for the open attribute. This comple­mentary directive is not removed by the browser and so provides a permanent reliable place to store the binding inform­ation.

Arguments:
ngOpen - {expre­ssion} - If the expression is truthy, then special attribute "­ope­n" will be set on the element.

Specify custom behavior on paste event.
Arguments:
ngPaste - {expre­ssion} - Expression to evaluate upon paste. (Event object is available as $event)

ngPlur­alize is a directive that displays messages according to en-US locali­zation rules. These rules are bundled with angula­r.js, but can be overridden (see Angular i18n dev guide). You configure ngPlur­alize directive by specifying the mappings between plural categories and the strings to be displayed.
Arguments:
count - {string | expres­sion} - The variable to be bound to.
when - {string} - The mapping between plural category to its corres­ponding strings.
offset (optional) - {number} - Offset to deduct from the total number.

The HTML specif­ication does not require browsers to preserve the values of boolean attributes such as readonly. (Their presence means true and their absence means false.) If we put an Angular interp­olation expression into such an attribute then the binding inform­ation would be lost when the browser removes the attribute. The ngReadonly directive solves this problem for the readonly attribute. This comple­mentary directive is not removed by the browser and so provides a permanent reliable place to store the binding inform­ation.

Arguments:
ngReadonly - {expre­ssion} - If the expression is truthy, then special attribute "­rea­don­ly" will be set on the element

The ngRepeat directive instan­tiates a template once per item from a collec­tion. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Special properties are exposed on the local scope of each template instance, including:
$index - number - iterator offset of the repeated element (0..le­ngth-1)
$first - boolean - true if the repeated element is first in the iterator.
$middle - boolean - true if the repeated element is between the first and last in the iterator.
$last - boolean - true if the repeated element is last in the iterator.
$even - boolean - true if the iterator position $index is even (otherwise false).
$odd - boolean - true if the iterator position $index is odd (otherwise false).

Arguments:
ngRepeat - {repea­t_e­xpr­ession} - The expression indicating how to enumerate a collec­tion. These formats are currently supported:

variable in expression – where variable is the user defined loop variable and expression is a scope expression giving the collection to enumerate.

For example: album in artist.al­bums.

(key, value) in expression – where key and value can be any user defined identi­fiers, and expression is the scope expression giving the collection to enumerate.

For example: (name, age) in {'adam­':10, 'amali­e':12}.

variable in expression track by tracki­ng_­exp­ression – You can also provide an optional tracking function which can be used to associate the objects in the collection with the DOM elements. If no tracking function is specified the ng-repeat associates elements by identity in the collec­tion. It is an error to have more than one tracking function to resolve to the same key. (This would mean that two distinct objects are mapped to the same DOM element, which is not possible.) Filters should be applied to the expres­sion, before specifying a tracking expres­sion.

For example: item in items is equivalent to item in items track by $id(item). This implies that the DOM elements will be associated by item identity in the array.

variable in expression as alias_­exp­ression – You can also provide an optional alias expression which will then store the interm­ediate results of the repeater after the filters have been applied. Typically this is used to render a special message when a filter is active on the repeater, but the filtered result set is empty.

For example: item in items | filter:x as results will store the fragment of the repeated items as results, but only after the items have been processed through the filter.

For example: item in items track by $id(item). A built in $id() function can be used to assign a unique $$hashKey property to each item in the array. This property is then used as a key to associated DOM elements with the corres­ponding item in the array by identity. Moving the same object in array would move the DOM element in the same way in the DOM.

For example: item in items track by item.id is a typical pattern when the items come from the database. In this case the object identity does not matter. Two objects are considered equivalent as long as their id property is same.

For example: item in items | filter­:se­arc­hText track by item.id is a pattern that might be used to apply a filter to items in conjun­ction with a tracking expres­sion.

The HTML specif­ication does not require browsers to preserve the values of boolean attributes such as selected. (Their presence means true and their absence means false.) If we put an Angular interp­olation expression into such an attribute then the binding inform­ation would be lost when the browser removes the attribute. The ngSelected directive solves this problem for the selected attribute. This comple­mentary directive is not removed by the browser and so provides a permanent reliable place to store the binding inform­ation.

Arguments:
ngSelected - {expre­ssion} - If the expression is truthy, then special attribute "­sel­ect­ed" will be set on the element

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angula­r-c­sp.css to your html file (see ngCsp).

Arguments:
ngShow - {expre­ssion} - If the expression is truthy then the element is shown or hidden respec­tively.

HTML input element control with angular data-b­inding.
Arguments:
ngModel(string): Assignable angular expression to data-bind to.
name(optional, string): Property name of the form under which the control is published.
required(optional, string): Sets required validation error key if the value is not entered.
ngRequired(optional, boolean): Sets required attribute if set to true
ngMinl­ength(optio­nal­,nu­mber): Sets minlength validation error key if the value is shorter than minlength.
ngMaxl­ength(optio­nal­,nu­mber): Sets maxlength validation error key if the value is longer than maxlength.
ngPattern(optional, string): Sets pattern validation error key if the value does not match the RegExp pattern expres­sion. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expres­sions.
ngChange(optio­nal­,st­ring) Angular expression to be executed when input changes due to user intera­ction with the input element.

HTML checkbox.
Arguments:
ngModel, string: Assignable angular expression to data-bind to.
name(optio­nal), string: Property name of the form under which the control is published.
ngTrue­Value(optio­nal), expression: The value to which the expression should be set when selected.
ngFals­eValue(optio­nal), expression: The value to which the expression should be set when not selected.
ngChange(optio­nal), string: Angular expression to be executed when input changes due to user intera­ction with the input element.

Input with datetime validation and transf­orm­ation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, the text must be entered in a valid ISO-8601 local datetime format (yyyy-­MM-­ddT­HH:mm), for example: 2010-1­2-2­8T1­4:57. The model must be a Date object.
ngModel, string: Assignable angular expression to data-bind to.
name(optio­nal), string: Property name of the form under which the control is published.
min(optio­nal), string: Sets the min validation error key if the value entered is less than min. This must be a valid ISO datetime format (yyyy-­MM-­ddT­HH:mm).
max(optio­nal), string: Sets the max validation error key if the value entered is greater than max. This must be a valid ISO datetime format (yyyy-­MM-­ddT­HH:mm).
required(optio­nal), string: Sets required validation error key if the value is not entered.
ngRequired (optio­nal), string: Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngChange(optio­nal), string: Angular expression to be executed when input changes due to user intera­ction with the input element.

Input with date validation and transf­orm­ation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601 date format (yyyy-­MM-dd), for example: 2009-0­1-06. The model must always be a Date object.
ngModel, string: Assignable angular expression to data-bind to.
name(optio­nal), string: Property name of the form under which the control is published.
min(optio­nal), string: Sets the min validation error key if the value entered is less than min. This must be a valid ISO date string (yyyy-­MM-dd).
max(optio­nal), string: Sets the max validation error key if the value entered is greater than max. This must be a valid ISO date string (yyyy-­MM-dd).
required(optio­nal), string: Sets required validation error key if the value is not entered.
ngRequired(optio­nal), string: Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngChange(optio­nal), string: Angular expression to be executed when input changes due to user intera­ction with the input element.

Input with time validation and transf­orm­ation. In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, the text must be entered in a valid ISO-8601 local time format (HH:mm­:ss), for example: 14:57:00. Model must be a Date object. This binding will always output a Date object to the model of January 1, 1970, or local date new Date(1970, 0, 1, HH, mm, ss).

ngModel - {string} - Assignable angular expression to data-bind to.
name (optional) - {string} - Property name of the form under which the control is published.
min (optional) - {string} - Sets the min validation error key if the value entered is less than min. This must be a valid ISO time format (HH:mm­:ss).
max (optional) - {string} - Sets the max validation error key if the value entered is greater than max. This must be a valid ISO time format (HH:mm­:ss).
required (optional) - {string} - Sets required validation error key if the value is not entered.
ngRequired (optional) - {string} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngChange (optional) - {string} - Angular expression to be executed when input changes due to user intera­ction with the input element.

Text input with URL valida­tion. Sets the url validation error key if the content is not a valid URL.
ngModel - {string} - Assignable angular expression to data-bind to.
name (optional) - {string} - Property name of the form under which the control is published.
required (optional) - {string} - Sets required validation error key if the value is not entered.
ngRequired (optional) - {string} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngMinl­ength (optional) - {number} - Sets minlength validation error key if the value is shorter than minlength.
ngMaxl­ength (optional) - {number} - Sets maxlength validation error key if the value is longer than maxlength.
ngPattern (optional) - {string} - Sets pattern validation error key if the value does not match the RegExp pattern expres­sion. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expres­sions.
ngChange (optional) - {string} - Angular expression to be executed when input changes due to user intera­ction with the input element.

Input with week-o­f-t­he-year validation and transf­orm­ation to Date. In browsers that do not yet support the HTML5 week input, a text element will be used. In that case, the text must be entered in a valid ISO-8601 week format (yyyy-­W##), for example: 2013-W02. The model must always be a Date object.
ngModel - {string} - Assignable angular expression to data-bind to.
name (optional) - {string} - Property name of the form under which the control is published.
min (optional) - {string} - Sets the min validation error key if the value entered is less than min. This must be a valid ISO week format (yyyy-­W##).
max (optional) - {string} - Sets the max validation error key if the value entered is greater than max. This must be a valid ISO week format (yyyy-­W##).
required (optional) - {string} - Sets required validation error key if the value is not entered.
ngRequired (optional) - {string} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngChange (optional) - {string} - Angular expression to be executed when input changes due to user intera­ction with the input element.

Text input with email valida­tion. Sets the email validation error key if not a valid email address.
ngModel, string: Assignable angular expression to data-bind to.
name(optio­nal), string: Property name of the form under which the control is published.
required(optio­nal), string: Sets required validation error key if the value is not entered.
ngRequired(optio­nal), string: Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngMinl­ength(optio­nal), number: Sets minlength validation error key if the value is shorter than minlength.
ngMaxl­ength(optio­nal), number: Sets maxlength validation error key if the value is longer than maxlength.
ngPattern(optio­nal), string: Sets pattern validation error key if the value does not match the RegExp pattern expres­sion. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expres­sions.
ngChange(optio­nal), string: Angular expression to be executed when input changes due to user intera­ction with the input element.

Input with month validation and transf­orm­ation. In browsers that do not yet support the HTML5 month input, a text element will be used. In that case, the text must be entered in a valid ISO-8601 month format (yyyy-MM), for example: 2009-01. The model must always be a Date object.
ngModel, string: Assignable angular expression to data-bind to.
name(optio­nal), string: Property name of the form under which the control is published.
min(optio­nal), string: Sets the min validation error key if the value entered is less than min. This must be a valid ISO month format (yyyy-MM).
max(optio­nal), string: Sets the max validation error key if the value entered is greater than max. This must be a valid ISO month format (yyyy-MM).
required(optio­nal), string: Sets required validation error key if the value is not entered.
ngRequired(optio­nal), string: Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngChange(optio­nal), string: Angular expression to be executed when input changes due to user intera­ction with the input element.

Text input with number validation and transf­orm­ation. Sets the number validation error if not a valid number.

ngModel, string: Assignable angular expression to data-bind to.
name(optio­nal), string: Property name of the form under which the control is published.
min(optio­nal), string: Sets the min validation error key if the value entered is less than min.
max(optio­nal), string: Sets the max validation error key if the value entered is greater than max.
required(optio­nal), string: Sets required validation error key if the value is not entered.
ngRequired(optio­nal), string: Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngMinl­ength(optio­nal), number: Sets minlength validation error key if the value is shorter than minlength.
ngMaxl­ength(optio­nal), number: Sets maxlength validation error key if the value is longer than maxlength.
ngPattern(optio­nal), string: Sets pattern validation error key if the value does not match the RegExp pattern expres­sion. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expres­sions.
ngChange(optio­nal), string: Angular expression to be executed when input changes due to user intera­ction with the input element.

Standard HTML text input with angular data binding, inherited by most of the input elements.
ngModel - {string} - Assignable angular expression to data-bind to.
name (optional) - {string} - Property name of the form under which the control is published.
required (optional) - {string} - Adds required validation error key if the value is not entered.
ngRequired (optional) - {string} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngMinl­ength (optional) - {number} - Sets minlength validation error key if the value is shorter than minlength.
ngMaxl­ength (optional) - {number} - Sets maxlength validation error key if the value is longer than maxlength.
ngPattern (optional) - {string} - Sets pattern validation error key if the value does not match the RegExp pattern expres­sion. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expres­sions.
ngChange (optional) - {string} - Angular expression to be executed when input changes due to user intera­ction with the input element.
ngTrim (optional) - {boolean} - If set to false Angular will not automa­tically trim the input. This parameter is ignored for input[­typ­e=p­ass­word] controls, which will never trim the input. (default: true)

HTML radio button.
ngModel, string:Assig­nable angular expression to data-bind to.
value, string: The value to which the expression should be set when selected.
name(optio­nal), string: Property name of the form under which the control is published.
ngChange(optio­nal), string: Angular expression to be executed when input changes due to user intera­ction with the input element.
ngValue, string: Angular expression which sets the value to which the expression should be set when selected.

The ngDblclick directive allows you to specify custom behavior on a dblclick event.
Arguments:
ngDblclick - {expre­ssion} - Expression to evaluate upon a dblclick. (The Event object is available as $event)

The HTML specif­ication does not require browsers to preserve the values of boolean attributes such as disabled. (Their presence means true and their absence means false.) If we put an Angular interp­olation expression into such an attribute then the binding inform­ation would be lost when the browser removes the attribute. The ngDisabled directive solves this problem for the disabled attribute. This comple­mentary directive is not removed by the browser and so provides a permanent reliable place to store the binding inform­ation.
Arguments:
ngDisabled - {expre­ssion} - If the expression is truthy, then special attribute "­dis­abl­ed" will be set on the element

Specify custom behavior on focus event.
Arguments:
ngFocus - {expre­ssion} - Expression to evaluate upon focus. (Event object is available as $event)

Nestable alias of form directive. HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determ­ined.
Arguments:
ngForm | name (optional) - {string} - Name of the form. If specified, the form controller will be published into related scope, under this name.

The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHide attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angula­r-c­sp.css to your html file (see ngCsp).

Arguments:
ngHide - {expre­ssion} - If the expression is truthy then the element is shown or hidden respec­tively.

Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error.
Arguments:
ngHref - {template} - any string which can contain {{}} markup.

The ngIf directive removes or recreates a portion of the DOM tree based on an {expre­ssion}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
Arguments:
ngIf - {expre­ssion} - If the expression is falsy then the element is removed from the DOM tree. If it is truthy a copy of the compiled element is added to the DOM tree.

Fetches, compiles and includes an external HTML fragment.

Arguments:
ngInclude | src - {string} - angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. src="'m­yPa­rti­alT­emp­lat­e.h­tml­'".
onload (optional) - {string} - Expression to evaluate when a new partial is loaded.
autoscroll (optional) - {string} - Whether ngInclude should call $ancho­rScroll to scroll the viewport after the content is loaded.
- If the attribute is not set, disable scrolling.
- If the attribute is set without value, enable scrolling.
- Otherwise enable scrolling only if the expression evaluates to truthy value.

Events:
$inclu­deC­ont­ent­Req­uested - Emitted every time the ngInclude content is requested.
Type: emit
Target: the scope ngInclude was declared in
$inclu­deC­ont­ent­Loaded - Emitted every time the ngInclude content is reloaded.
Type: emit
Target: the current ngInclude scope
$inclu­deC­ont­ent­Error - Emitted when a template HTTP request yields an erronous response (status < 200 || status > 299)
Type: emit
Target: the scope ngInclude was declared in

The ngInit directive allows you to evaluate an expression in the current scope.
Arguments:
ngInit - {expre­ssion} - Expression to eval.

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

Arguments:
ngSrc - {template} - any string which can contain {{}} markup.

Using Angular markup like {{hash}} in a srcset attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrcset directive solves this problem.

Arguments:
ngSrcset - {template} - any string which can contain {{}} markup.

The ngStyle directive allows you to set CSS style on an HTML element condit­ion­ally.

Arguments:
ngStyle - {expre­ssion} - Expression which evals to an object whose keys are CSS style names and values are corres­ponding values for those CSS keys.

Since some CSS style names are not valid keys for an object, they must be quoted. See the 'backg­rou­nd-­color' style in the example below.

Enables binding angular expres­sions to onsubmit events.

Arguments:
ngSubmit - {expre­ssion} - Expression to eval. (Event object is available as $event)

The ngSwitch directive is used to condit­ionally swap DOM structure on your template based on a scope expres­sion. Elements within ngSwitch but without ngSwit­chWhen or ngSwit­chD­efault directives will be preserved at the location as specified in the template.

Arguments:
ngSwitch | on - {*} - expression to match against ng-swi­tch­-when. On child elements add:
ngSwit­chWhen: the case statement to match against. If match then this case will be displayed. If the same match appears multiple times, all the elements will be displayed.
ngSwit­chD­efault: the default case when no other case match. If there are multiple default cases, all of them will be displayed when no other case match.

Directive that marks the insertion point for the transc­luded DOM of the nearest parent directive that uses transc­lusion.

Any existing content of the element that this directive is placed on will be removed before the transc­luded content is inserted.

Binds the given expression to the value of input[­select] or input[­radio], so that when the element is selected, the ngModel of that element is set to the bound value.

Arguments:
ngValue (optional) - {string} - angular expres­sion, whose value will be bound to the value attribute of the input element

Load the content of a <sc­rip­t> element into $templ­ate­Cache, so that the template can be used by ngInclude, ngView, or direct­ives. The type of the <sc­rip­t> element must be specified as text/n­g-t­emp­late, and a cache name for the template must be assigned through the element's id, which can then be used as a direct­ive's templa­teUrl.

Arguments:
type - {string} - Must be set to 'text/­ng-­tem­plate'.
id - {string} - Cache name of the template.

HTML SELECT element with angular data-b­inding.

ngOptions:
The ngOptions attribute can be used to dynami­cally generate a list of <op­tio­n> elements for the <se­lec­t> element using the array or object obtained by evaluating the ngOptions compre­hen­sio­n_e­xpr­ession.

Arguments:
ngModel - {string} - Assignable angular expression to data-bind to.
name (optional) - {string} - Property name of the form under which the control is published.
required(optional) - {string} - The control is considered valid only if value is entered.
ngRequired(optional) - {string} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngOptions(optional) - {compr­ehe­nsi­on_­exp­res­sion} - in one of the following forms:
for array data sources:
label for value in array
select as label for value in array
label group by group for value in array
*select as label group by group for value in array track by trackexpr
for object data sources:
label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in object
Where:
array / object: an expression which evaluates to an array / object to iterate over.
value: local variable which will refer to each item in the array or each property value of object during iteration.
key: local variable which will refer to a property name in object during iteration.
label: The result of this expression will be the label for <op­tio­n> element. The expression will most likely refer to the value variable (e.g. value.p­ro­per­tyN­ame).
select: The result of this expression will be bound to the model of the parent <se­lec­t> element. If not specified, select expression will default to value.
group: The result of this expression will be used to group options using the <op­tgr­oup> DOM element.
trackexpr: Used when working with an array of objects. The result of this expression will be used to identify the objects in the array. The trackexpr will most likely refer to the value variable (e.g. value.p­ro­per­tyN­ame).

HTML textarea element control with angular data-b­inding. The data-b­inding and validation properties of this element are exactly the same as those of the input element.

Arguments:
ngModel - {string} - Assignable angular expression to data-bind to.
name (optional) - {string} - Property name of the form under which the control is published.
required(optional) - {string} - Sets required validation error key if the value is not entered.
ngRequired(optional) - {string} - Adds required attribute and required validation constraint to the element when the ngRequired expression evaluates to true. Use ngRequired instead of required when you want to data-bind to the required attribute.
ngMinl­ength(optional) - {number} - Sets minlength validation error key if the value is shorter than minlength.
ngMaxl­ength(optional) - {number} - Sets maxlength validation error key if the value is longer than maxlength.
ngPattern (optional) - {string} - Sets pattern validation error key if the value does not match the RegExp pattern expres­sion. Expected value is /regexp/ for inline patterns or regexp for patterns defined as scope expres­sions.
ngChange (optional) - {string} - Angular expression to be executed when input changes due to user intera­ction with the input element.
ngTrim (optional) - {boolean} - If set to false Angular will not automa­tically trim the input. (default: true)