'select multiple' elements transcluded inside a component don't compile in IE

[mattdsteele]

Note: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Using <select size> or <select multiple> inside a transcluded component fails to compile Select's options properly in IE11

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).

http://plnkr.co/edit/Cf9EZEBVphYde9JaFRGI?p=preview

To reproduce:

• Open in IE11
• Note the labels on the <select> element aren't compiled/bound properly
• When you select an option, the element get compiled and {{binding}}s work
• However, when you then change the bindings in the <option> element (check/uncheck the box), the bindings don't update

What is the expected behavior?

Should work the same as in Edge/FF/Chrome: <option> elements get compiled initially, and are updated properly during the digest cycle.

What is the motivation / use case for changing the behavior?

There are instances where we have to manually build a <select multiple> using options declared via HTML.

Which versions of AngularJS, and which browser / OS are affected by this issue? Did this work in previous versions of AngularJS? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.

Tested on Win7 (64-bit) and Win10 (64-bit), IE11, against Angular 1.6.2 and 1.5.9; both fail. Edge, other browsers are fine.

Other information (e.g. stacktraces, related issues, suggestions how to fix)

Strangely, this only seems to happen when these particular mirrors are aligned:

• A <select> element with either multiple or size set,
• Transcluded inside another Angular component
• In IE11

Removing the transcluded component, or changing to a standard <select>, and the issue goes away.

Possibly related: https://github.com/angular/angular.js/issues/2809

[gkalpak]

I haven't tried to reproduce this outside Angular, but it seems like a bug in IE. Everything is compiled correctly, but the options' texts are not rendered correctly.

If you look in the DevTools, the elements show up with the correct texts, but they are rendered incorrectly on the page.

As a workaround, ngOptions seem to work fine.