# `select` (directive in module `ng` )

Improve this doc

## 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 select, 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 we aware of IE restrictions.

as element:

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

### Parameters

- `name – {string} –`

  assignable expression to data-bind to.

- `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`
  - 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.

## Example

#### Source

#### Demo