Modifying ng-options list fails to render in IE 10 (and 9) when contained in transcluded content #2809
Description
If you use a SELECT with ng-options underneath any directive that performs transclusion, and then modify the list used by ng-options, IE 9-10 will not automatically redraw the SELECT box to reflect the updated options unless the size of the list also happens to change.
Example:
<div ng-switch on="dummy">
<div ng-switch-default>
My List: <select ng-model="listSelected"
ng-options="item.value as item.name for item in childList">
</select>
</div>
</div>
If I swap out childList for another list of equal length, the browser still shows the previous options in the select until I click on it (and in IE9 even after clicking on it).
This fiddle demonstrates the issue in an ng-switch, and also in a custom-directive, and shows how when not in directive the problem doesn't occur. The parent list drives changes to the child list, in IE you'll see that the child list doesn't redraw with the new options except in the third example which is the one that doesn't transclude. Other browsers work as expected.
http://jsfiddle.net/redwood7/BGq3s/embedded/result/
Here's what I've tracked down so far; there is a weird side effect when you cloneNode() a SELECT in IE. IE won't redraw the cloned SELECT unless you either add/remove options from it, or hide()/show() it, or click it, or do something else that forces it to redraw. This fiddle demonstrates this problem completely outside of angular:
http://jsfiddle.net/redwood7/kHWxL/embedded/result/
The reason this relates to transclude in Angular is because directives that transclude use cloneNode() to copy the transcluded content. So, a SELECT with ng-options in that transcluded content end up having the problem. And ng-options re-uses existing OPTIONs instead of removing and recreating them, so if your lists are equal length IE never redraws.
One workaround is to have a custom directive that inserts/removes a dummy option when IE. Another is to ng-repeat to create options. I'm hoping this is something that can be fixed in ng-options. Perhaps in IE make it recreate the OPTIONs instead of re-using them.
I've also posted this topic to the mailing list with some additional fiddles showing workarounds:
https://groups.google.com/forum/#!topic/angular/20SJvpwpt2o/discussion