md-select, md-option: using html in the option does not apply to selected element

[DmitryEfimenko]

Easier to show an example.
I have an array of options in the controller:

var opts = [
    { val: 1, text: '<span class="op">Fancy</span> Text 1' },
    { val: 2, text: '<span class="op">Fancy</span> Text 2' },
    { val: 3, text: '<span class="op">Fancy</span> Text 3' },
    { val: 4, text: '<span class="op">Fancy</span> Text 4' },
]

Notice that each item in the opts has text property with html.
my md-select looks like this:

<md-select ng-model="myModel">
    <md-option ng-repeat="op in opts" ng-value="op.val">
        <span ng-bind-html="op.text"></span>
    </md-option>
</md-select>

Notice the use of ng-bind-html
This produces the following option (example shows just first option):

<md-option ng-repeat="op in opts" ng-value="op.val" tabindex="0" class="ng-scope" role="option" aria-selected="false" id="select_option_00V" value="==">
    <div class="md-text">
        <span ng-bind-html="op.text" class="ng-binding">
            <span class="op">Fancy</span> Text 1
        </span>
    </div><div class="md-ripple-container"></div>
</md-option>

That all looks good. However, once this option is selected it looses the html I provided:

<md-select ng-model="myModel" class=".." [...deleted for simplicity]>
    <md-select-label class="md-select-label" id="select_label_007">
        <span>Fancy Text 1</span>
        <span class="md-select-icon" aria-hidden="true"></span>
    </md-select-label>
</md-select>

Notice a <span>Fancy Text 1</span>. It does not have the html I provided anymore.

[dohomi]

Would be great if you would support md-iconinside of md-select-optionor better in the result of md-select-label. Currently it simply doesn't align well inside of the overlay and didn't display the icon inside of the md-select-label. Here is a codepen, where you see the alignment issue and the selected element won't display the icon: http://codepen.io/anon/pen/mJqMrx

[ThomasBurleson]

Pair w/ @topherfangio

[erinjanae]

+1

[richardchristian]

+1

[audiodude]

+1

[hulyav]

+1

[breity]

+1

[ishener]

+1

[StartingDreams]

+1

[DoKraus]

+1

[vsilva472]

+1

[ghost]

+1

[tux1337]

@NathanaelDekeister
the output is not different for me. When the item is selected, the icon is not displayed. I see only the text: "face"

behavior is the same for me like in the initial plunker

[T4YoO]

+1

[Splaktar]

I don't know what the +1s mean after this was released in 1.0.0-rc.5. If you are having an issue related to this functionality, please open a new issue with a CodePen demo of the problem. Please avoid using +1 in the future and use GitHub reactions instead as those allow us to sort and filter issue based on number of reactions.