View source Improve this doc

# `select`
directive in module `ng`

## Description

HTML `SELECT` element with angular data-binding.

### `ngOptions`

Optionally `ngOptions` attribute can be used to dynamically generate a list of `<option>` elements for a `<select>` element using an array or an object obtained by evaluating the `ngOptions` expression.

When an item in the `<select>` menu is selected, the value of array element or object property represented by the selected option will be bound to the model identified by the `ngModel` directive of the parent select element.

Optionally, a single hard-coded `<option>` element, with the value set to an empty string, can be nested into the `<select>` element. This element will then represent `null` or "not selected" option. See example below for demonstration.

Note: `ngOptions` provides iterator facility for `<option>` element which should be used instead of `ngRepeat` when you want the `select` model to be bound to a non-string value. This is because an option element can currently be bound to string values only.

## Usage

This directive can be used as custom element, but be aware of IE restrictions.

as element:

    <select
           ngModel="{string}"
           [name="{string}"]
           [required]
           [ngRequired="{string}"]
           [ngOptions="{comprehension_expression}"]>
    </select>

#### Parameters

Param | Type | Details
--- | --- | ---
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)

comprehension_expression

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 `<option>` element. The `expression` will most likely refer to the `value` variable (e.g. `value.propertyName`).
- `select`: The result of this expression will be bound to the model of the parent `<select>` element. If not specified, `select` expression will default to `value`.
- `group`: The result of this expression will be used to group options using the `<optgroup>` 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.propertyName`).

## Example

#### Source

## Demo