ng-model to a multiple select in angulardart

Question

I am trying to use ng-model with a multiple select in angulardart. The select is dynamically populated with option by django-autocomplete-light. Once I have added a few options, my (list) model is still empty.

Any point I could look at?

Here is a minimal example.

Template:

 <span id="id_car-wrapper"
   class="modern-style autocomplete-light-widget"
   data-widget-bootstrap="normal"
   data-widget-maximum-values="4" data-widget-ready="1">
      <span id="id_expert-deck" class="deck"></span>
      <input
        type="text"
        name="car-autocomplete"
        id="id_car-autocomplete" value=""
        class="autocomplete"
        data-autocomplete-choice-selector="[data-value]"
        data-autocomplete-minimum-characters="1"
        data-autocomplete-url="/autocomplete/CarAutocomplete/"
        placeholder="car's name" autocomplete="off">

      <select style="display: none" class="value-select"
        name="cars" id="id_expert" multiple="multiple"
        ng-model="myctrl.cars"></select>

Controller:

@NgController(
    selector: '[a-selector]',
    publishAs: 'myctrl')
class MyController {
    List<String> cars;
}

Edit: according to Günter's answer, I wrote this directive:

  @NgDirective(selector: 'select[multiple]')
  class MultipleSelectDirective {
    SelectElement _selectElement;
    Compiler _compiler;
    Injector _injector;
    DirectiveMap _directiveMap;

    MultipleSelectDirective(Element this._selectElement, this._injector, this._compiler, this._directiveMap) {
      _selectElement.addEventListener('DOMNodeInserted',
          (_) => _compiler(_selectElement.childNodes, _directiveMap)(_injector, _selectElement.childNodes));
      _selectElement.addEventListener('DOMNodeRemoved',
          (_) => _compiler(_selectElement.childNodes, _directiveMap)(_injector, _selectElement.childNodes));
    }  
  }

Answer 1

I ended doing it by inspecting the DOM from Dart each time it is updated:

@NgDirective(selector: 'select[multiple][ng-model]')
class MultipleSelectDirective {
  SelectElement _selectElement;
  NgModel ngModel;
  Scope scope;

  MultipleSelectDirective(Element this._selectElement, this.ngModel, this.scope) {
    _selectElement.addEventListener('DOMNodeInserted',
        (_) => _setValue());
    _selectElement.addEventListener('DOMNodeRemoved',
        (_) => _setValue());
  }

  void _setValue() {
    List<OptionElement> options = _selectElement.selectedOptions;
    List val = [];
    options.forEach((o) => val.add(o.value));
    ngModel.viewValue = val;
  }
}