Material: md-select: selected item label is shown twice when md-option list changes

[oemmes]

Actual Behavior:

• What is the issue? * If an item is selected and the option list (<md-option ng-repeat="...">) changes the select box contains the label of the selected item twice (as if it was selected multiple times): "value, value".
  When later on a digest cycle runs for the scope of the md-select (e.g. by opening the select box again) the label is updated correctly.
• What is the expected behavior? The selected value should only be shown once as label.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/anon/pen/WxqkyA
• Details: Click the "Update options" button to see the issue

While checking if it's related to changes in our application code (which it is not) I already found out that the syncLabelText() method is called multiple times. The first time is okay, but the next calls create the wrong label because the <md-option> elements are contained twice in the <md-select-menu> and both elements with the current value are marked as "selected". Looks like there's a mix of old and new <md-option> elements in the DOM.

Angular Versions: *

• Angular Version: 1.4.12, 1.5.5
• Angular Material Version: 1.1.0 stable (reproducable since 1.1.0-rc2)

Additional Information:

• Browser Type: * any
• Browser Version: * any
• OS: * any
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[oemmes]

I was able to find a workaround for my application, though a fix in Angular Material would of course be appreciated.

angular.module('myApp').directive('mdOption', function(){
    return {
        link: function(scope, elem) {
            scope.$on('$destroy', function(){
                elem.detach() ;
            }) ;
        }
    } ;
}) ;

Really looks like the DOM update is the problem which occurs "too late" for the label generation.

[oemmes]

The multiple DOM elements can also (and probably should) be prevented by using "track by" in the ng-repeat expression of <md-option>, then the label is okay. The above mentioned workaround (md-option directive) is not needed then.

Updated (working) CodePen: http://codepen.io/anon/pen/ALAdgK

Though the issue can still occur if using "track by" is not possible.

[juanarbol]

This works for me, add track by $index
<md-option ng-repeat="option in vm.options track by $index" ng-value="option.value">

[rafaeldev]

In my scenario I fix it by other way...
I change for value track by clause from $index to obj.id

My twice value appear when I remove one item from array using arr.splice(idx, 1);

[laskoviymishka]

for me seems that track by $index cause that issue. After removing it this issue dissapear