First selection of <select> element not working in IE

angularjs, internet-explorer

Solution

I have made a directive to handle this... I called it "empty-option":

myApp.directive("emptyOption", ["$timeout", function ($timeout) {
    return {
        restrict: "A",
        require: "^ngModel",
        link: function (scope, element, attrs, ngModelCtrl) {
            //Get "SELECT" element of empty option
            var parentSelectDom = element[0].parentNode,
                removed = false;

            //Make sure the element is "SELECT" before proceeding.
            if (parentSelectDom.nodeName === "SELECT") {

                //When $modelValue changes, either add/remove empty option
                //based on whether or not $modelValue is defined.
                scope.$watch(function () {
                    return ngModelCtrl.$modelValue;
                }, function (newVal, oldVal) {
                    if (newVal === undefined) {
                        if (removed) {
                            $timeout(function () {
                                //Add empty option back to list.
                                parentSelectDom.add(element[0], parentSelectDom[0]);
                            }, 0);
                            removed = false;
                        }
                    }
                    else if (!removed) {
                        $timeout(function () {
                            //remove empty option.
                            parentSelectDom.remove(0);
                        }, 0);
                        removed = true;
                    }
                });
            }
        }
    }
}]);

The directive allows for an empty option to be specified for a select. It removes the option when a selection is made and adds back the empty option when the model value is cleared.

Fiddle here.

Problem

We're seeing some really odd behaviour in IE when using the `ng-options` directive with a `select` element which are not happening when we use `<option ng-repeat=''>`. The first time I select an option from the drop down box which was created using `ng-options`, whichever option I select, the first one is displayed. If I use ng-repeat to create the options it works perfectly every time. If I select an option from the "broken" drop down, then select an option from the not broken one, the first drop down box actually changes it's selected item to display the correct selection. I'm using IE 11 and have got an example here showing the issue. http://jsfiddle.net/Q26mW/

Original source