The placeholder (null option) in an ngSelect is broken in certain scenarios on IE9

Browsers Tested

Chrome 25: 💚
Firefox 12: 💚
Firefox 19: 💚
IE8: 💚
IE9: 💥
IE10: 💚

Reproduction

http://jsfiddle.net/ySmah/2/

Details

The fiddle above demonstrates that in IE9, for 2 identical <select> elements with ng-options; setting ng-required on one of them causes the placeholder element to no longer be correctly selected.

Inspecting the element shows that whilst domElement.value is "" in both cases, $(domElement).val() is null in the broken example.

I've tried to trace this in many ways but haven't been able to get any closer than this; Angular sets up the a directive for the following 'boolean' attributes multiple,selected,checked,disabled,readOnly,required. These directives are created with the name of the attribute, prefixed with ng-. These directives set up a watch to evaluate the value passed into them and call attr.$set(attributeName, !!value).

Using any of these attributes causes the bug.

Update

Whilst the above neatly causes a reproduction, the root cause is more significant; any digest caused after the dropdown has rendered has the effect of wiping out the placeholder (as experienced here: #1826)

I've narrowed the cause of this down to a piece of code which causes a deselection of all options in the select. In most browsers unselecting the currently selected option causes the dropdown to revert to it's usual 'no option available' behavior, which is to implicitly select the first item; IE9 however will cause the dropdown to be blank.

I'm putting together a pull request now.

Unfortunately this issue is a customer priority for us, so any form of workaround would also be appreciated.