Issue with ngOptions and empty option inside ngIf (IE10). #9008
Description
We've spotted this issue while testing IE10 and it seems to be the only affected browser (we test chrome, firefox, ie10 and ie11).
Scenario:
-JS:
var app = angular.module('app', []);
app.controller('forms', function($scope) {
$scope.o = {};
$scope.opts2 = [];
$scope.changeOptions = function(value) {
$scope.opts2 = $scope.options[value];
};
$scope.opts = [{
id: 'a',
value: 'a'
}, {
id: 'b',
value: 'b'
}];
$scope.options = {
a: [{id: 'a1', value: 'a1'}],
b: [{id: 'b1', value: 'b1'}]
};
});
-HTML:
<body>
<div ng-app="app">
<br>
<form class="form" name="form" ng-controller="forms" novalidate="">
<div class="form-group col-sm-3">
<select ng-model="o.s" class="form-control" ng-options="value.id as value.value for value in opts" ng-change="changeOptions(o.s)">
<option value=""></option>
</select>
</div>
<div class="form-group col-sm-3">
<p>s = {{o.s}}</p>
</div>
<div class="form-group col-sm-3" ng-if="'true'">
<select ng-model="o.s2" class="form-control" ng-options="v.id as v.value for v in opts2">
<option value=""></option>
</select>
</div>
<div class="form-group col-sm-3">
<select ng-model="o.s2" class="form-control" ng-options="v.id as v.value for v in opts2">
<option value=""></option>
</select>
</div>
</form>
</div>
</body>
How to reproduce:
Using only the keyboard, tab to the first select and select the second value using the down key, this will trigger a ng-change that will update the options for the second select. Tab to the second select and select the first item, the displayed label will correspond to the first set of options. You will see that the select that it's surrounded by ngIf is displaying incorrect values while the select that doesn't shows the correct value.
This issue only occurs if the length of the options array matches and you have a blank option.
Expected result:
The labels should always match the selected option in the current ngOptions array.
Possible causes:
We think it could be related to the fact that ngIf clones the content of the element that it's attached to and the fact that selectDirective reuses DOM nodes instead of creating new ones.
Plunker that reproduces the issue: