Bug with ngModel and material-select

[borispac]

Description

I found an error with the dropdown material-select when used with material-select

Steps to reproduce

  <div input-field class="col s5">
      <select class="" ng-model="vm.user.userResp1" name="resp1" material-select watch>
      <option value="" disabled selected>Choose your resp1</option>
      <option value="{{value.id}}" ng-repeat="value in vm.users track by value.id">{{value.lastname}} {{value.firstname}}</option>
    </select>
    <label for="resp1">Resp1</label>
  </div>

In the controller

this.user.userResp1 = 2 this.users is fed by an asynchronous code (service $http)

What exactly is supposed to happen

The dropdown is supposed to be select with the default value vm.user.userResp1 and be bound to it

What exactly does happens

The ng-model linked value is empty and the value is not selected

Solution found

After few hours of research, i found a quick fix. The problem came from the directive 'ui.materialize.ngModel' (line 92 angular.materialize.js)

Line 106 i added a check on the tagName :

if (element.get(0).tagName !== 'SELECT') element.trigger("change");

After that its working perfectly, is that an error known to you ?

Hope it helps,

[dylandechant]

I am also having a similar issue. I have a couple of material selects with all the same values. they are all the same ng-model. when you first change one they all update. but if i go back and try to change again none of them update though the model does.

[webbiesdk]

Your quick fix is actually pretty good.

The .trigger('change') only really exists to make place-holder texts work well, so filtering out SELECT tags isn't a problem.