material_select does not update display value after selected option has been changed by program

[yangpu]

I have create an angular directive to initialize select control:

  SelectDirective = function($timeout) {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
        return $timeout(function() {
          return $(element).material_select();
        }, 50);
      }
    };
  };

to create select control in jade:

   .col.s6.input-field
      select#priority(md-select, ng-model='vm.priority')
         option(value='0') 0
         option(value='1') 1
         option(value='2') 2
         option(value='3') 3
      label(for='priority') Priority

The issue is that the select control doesn't update the display value when the priority value has been changed in controller. However, the priority value is changed according to the selected option value by mouse or key operation.

Is it possible to have a public method to select value in material_select? So that it's feasible to $watch ng-model value in directive to update the display value by the method.

[b1rdex]

http://materializecss.com/forms.html

Updating/Destroying Select

If you want to update the items inside the select, just rerun the initialization code from above after editing the original select.

$(document).ready(function() {
    $('select').material_select();
  });

[yangpu]

It looks nothing changed to re-initialize the select control after select options or value is changed.

[govindjhag]

I am facing same problem

[freddy-daniel]

Same issue in firefox we are not re-initializing.

[nesthor12]

I am also experiencing the same problem. However, I think I found a solution for this.

First set the value default option to empty string.

like this in HTML:
<select id="selectid">
<option value="">Select</option>
<option value="1">1</option>
</select>

and then in JS:
$("#selectid").find('option[value=""]').prop('selected', true);

[tomscholz]

Duplicate of #4562

[bernardoadc]

In AngularJS I solved with "track by $index"