Set model to null does not select empty option

[7c6f1568-555e-42a8-aff6-9045799c8b86]

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

There is a select like this (nothing unusual here):

 <select ng-model="model.selectedValue"
         ng-options="value.id as value.value for value in modelOptions">
 <option value="" ng-if="!model.selectedValue">Null</option>

Initially the model is null, so when the page first opens the Null option is selected.

$scope.model ={"selectedValue":null};

However, if I then change the selected value to something else, and then back to null by clicking these two buttons

<button ng-click="model.selectedValue=1">Select Yes</button>
<button ng-click="model.selectedValue=null">Select Null</button>

then the Null option is NOT selected - so now the UI is out of sync with the model.

Bug tested with Angular 1.2.22 in IE10 and Chrome 36.

Changing ng-if to ng-show or to ng-if="!$parent.model.selectedValue" fixes the problem in Chrome, but unfortunately in IE10 now I get a different problem - the Null option isn't removed anymore when I select 'Yes'.

[btford]

You should not be using ng-if inside of the <select>.

Consider removing the default option from the array of options that you're binding over instead,

[rodyhaddad]

Everything @btford said is valid

---

This got introduced in 1.2.15, and it worked in 1.2.14

By looking at the changelog, the only change to select was dc149de, so I imagine it's the culprit @caitp

[7c6f1568-555e-42a8-aff6-9045799c8b86]

Thanks. The ng-if was there as a workaround for a different bug - #8158 . I see that has been fixed in 1.3 beta so I will try to get rid of ng-if now.