Improve this Doc View Source

HTML `SELECT` element with angular data-binding.

In many cases, `ngRepeat` can be used on `<option>` elements instead of ngOptions to achieve a similar result. However, `ngOptions` provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance, as well as providing more flexibility in how the `<select>`'s model is assigned via the `select` `as` part of the comprehension expression.

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

If the viewValue contains a value that doesn't match any of the options then the control will automatically add an "unknown" option, which it then removes when this is resolved.

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 the `null` or "not selected" option. See example below for demonstration.

The value of a `select` directive used without `ngOptions` is always a string. When the model needs to be bound to a non-string value, you must either explictly convert it using a directive (see example below) or use `ngOptions` to specify the set of options. This is because an option element can only be bound to string values at present.

### Example (binding `select` to a non-string value)

Edit in Plunker

    <select ng-model="model.id" convert-to-number>
      <option value="0">Zero</option>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
    {{ model }}

    angular.module('nonStringSelect', [])
    .run(function($rootScope) {
      $rootScope.model = { id: 2 };
    })
    .directive('convertToNumber', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
          ngModel.$parsers.push(function(val) {
            return parseInt(val, 10);
          });
          ngModel.$formatters.push(function(val) {
            return '' + val;
          });
        }
      };
    });

    it('should initialize to model', function() {
      var select = element(by.css('select'));
      expect(element(by.model('model.id')).$('option:checked').getText()).toEqual('Two');
    });

## Directive Info

- This directive executes at priority level 0.

## Usage

- as element:

      <select>
      ...
      </select>