Search code examples
angularjsselectinternet-explorer-10

IE10 with select using ng-options with no default value set in model always selects first element in dropdown

I am using Angular v1.0.8

I have a select and I am using ng-options directive to populate it with an array of data declared in my Controller.

HTML snippet

<body ng-controller="SelectCtrl">
  <select 
    ng-model="selected" 
    ng-options="o as o.caption for o in options" />
</body>

Code snippet

angular.module('app', [])
  .controller('SelectCtrl', ['$scope', function($scope) {

    $scope.options = [
      { key: 1, caption: '1' },
      { key: 2, caption: '2' },
      { key: 3, caption: '3' },
      { key: 4, caption: '4' },
      { key: 5, caption: '5' }
    ];

}]);

In Chrome, if you select let's say option 3 then, as expected, it gets selected.

In IE10, however, if you select option 3 then option 1 gets selected.

(http://plnkr.co/edit/T9bbEW?p=preview)

This only happens when there is no default selection set in the controller. And subsequent selections done after the "blank" choice is removed gets set correctly.

I suspect that it might possibly be a duplicate of This issue but I am not entirely sure. I am not really dynamically changing the options here although I suppose maybe Angular is since the "blank" choice are getting removed in both browsers.

I do however want this functionality. I don't want to provide a default value for this select because the user needs to make an active choice for me.

Does anyone know a workaround and/or solution for this? Preferably one that does not involve messing with the options using JQuery...

Solution

  • The blank item that angular adds has some odd behavior. The way we've gotten around it is to explicitly add our own blank item and select it via the controller:

    angular.module('app', []).controller('SelectCtrl', ['$scope', function($scope) {

  $scope.options = [
    { key: 0, caption: ' ' },
    { key: 1, caption: '1' },
    { key: 2, caption: '2' },
    { key: 3, caption: '3' },
    { key: 4, caption: '4' },
    { key: 5, caption: '5' }
  ];

  $scope.selected = $scope.options[0]

}]);