internet explorer - How to fix IE select issue when dynamically changing options

Question

I have a set of selects that all have the same options. Then I run those options through a filter so that any options that are selected in a different select don't show up in the select. See this jsFiddle (in non-IE browser) to see what I mean. Basically I'm preventing the same option from being selected multiple times among the selects

Now, what I've done has an issue in IE. Open that fiddle in IE (I've only tried it in IE9, but I'm guessing previous versions have the same issue). Change the last select to AAA. Notice how the 3 other selects all changed what they display. The model for them did not change, but IE somehow chokes when the options are changed.

My questions is first, am I doing something wrong with this functionality in general? This same code does exactly what I want in Chrome and FF, but am I doing something that I just shouldn't be? Second, how can I get around this in IE? I tried some timeouts that would clear and re-set the model, but things noticeable jumped around. I'm wondering if there's a good, clean, low impact workaround for this.

Any help would be much appreciated. Thanks.

--UPDATE--

This has been fixed in Angular itself with version 1.3.3 using A. S. Ranjan's solution below. See new fiddle with 1.3.3: http://jsfiddle.net/m2ytyapv/

//dummy code so I can post the edit

Answer 1

I experienced the same issue the other night and after throwing everything I could think of at it I've come to the conclusion that IE just doesn't want to handle updating filters when using selects.

My solution is to change your selects to look like this:

 <select class="selectList" ng-repeat="currId in selectedIds" ng-model="selectedIds[$index]"  ng-options="currOption.id as currOption.value for currOption in myObj | myfilter:selectedIds:$index" data-ng-change="fixIE()"></select>

They now have a class and an ng-change on them. Then in your controller do this fun little bit of code:

$scope.fixIE = function(){
    //code to check if IE so the other browsers don't get this ugly hack.
    var selectLists = document.querySelectorAll(".selectList");
    for(var x = 0;x  < selectLists.length; x++){
        selectLists[x].parentNode.insertBefore(selectLists[x], selectLists[x]);
    }       
};

What it does is rip the elements out of the DOM and replace them into the same location. Here's a working fiddle jsFiddle

Some of the other solutions I tried that didn't involve javascript were things like toggling the display/visibility of the select. Having their zIndex's moved. The only thing that for sure fixed it was this piece of code.