HTML SELECT element with angular data-binding if used with NgModelDirective.

The NgModelDirective will receive the currently selected item. The binding is performed on the OPTION.value property. An empty OPTION.value is treated as null.

If you the model contains value which does not map to any OPTION then a new unknown OPTION is inserted into the list. Once the model points to an existing OPTION the unknown OPTION is removed.

Becouse OPTION.value attribute is a string, the model is bound to a string. If there is need to bind to an object then OptionValueDirective should be used.

@NgDirective(
   selector: 'select[ng-model]',
   visibility: NgDirective.CHILDREN_VISIBILITY
)
class InputSelectDirective implements NgAttachAware {
 final Expando<OptionValueDirective> expando = new Expando<OptionValueDirective>();
 final dom.SelectElement _selectElement;
 final NodeAttrs _attrs;
 final NgModel _model;
 final Scope _scope;

 final dom.OptionElement _unknownOption = new dom.OptionElement();
 dom.OptionElement _nullOption;

 _SelectMode _mode = new _SelectMode(null, null, null);
 bool _dirty = false;

 InputSelectDirective(dom.Element this._selectElement,
                      NodeAttrs this._attrs,
                      NgModel this._model,
                      Scope this._scope) {
   _unknownOption.value = '?';
   _selectElement.queryAll('option').forEach((o) {
     if (_nullOption == null && o.value == '') {
       _nullOption = o;
     }
   });
 }

 attach() {
   _attrs.observe('multiple', (value) {
     _mode.destroy();
     if (value == null) {
       _model.watchCollection = false;
       _mode = new _SingleSelectMode(expando, _selectElement, _model, _nullOption, _unknownOption);
     } else {
       _model.watchCollection = true;
       _mode = new _MultipleSelectionMode(expando, _selectElement, _model);
     }
     _mode.onModelChange(_model.viewValue);
   });

   _selectElement.onChange.listen((event) => _mode.onViewChange(event));
   _model.render = (value) => _mode.onModelChange(value);
 }

 /**
  * This method invalidates the current state of the selector and forces a rerendering of the
  * options using the [Scope.$evalAsync].
  */
 dirty() {
   if (!_dirty) {
     _dirty = true;
     _scope.$evalAsync(() {
       _dirty = false;
       _mode.onModelChange(_model.viewValue);
     });
   }
 }
}