Seleccionar elemento en angular que no actualiza modelo Valor en segunda selección

Question

Aug 12, 2015, 12:22 AM

Seleccionar elemento en angular que no actualiza modelo Valor en segunda selección

Tengo un elemento de selección vinculado a un modelo en una vista angular. Al completar el formulario con el teclado, noté que si baja la flecha a la segunda opción, el valor, el modelo aún representa el primer valor. Esto solo sucede cuando se usa el teclado para completar el formulario.

La configuración es bastante simple, usando angular 1.4.3:

var app = angular.module('app', []);

app.controller('myController', function() {
  var vm = this;

  vm.options = [{
    Id: 1,
    Value: 'A'
  }, {
    Id: 2,
    Value: 'B'
  }, {
    Id: 3,
    Value: 'C'
  }]
});

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>

<body ng-app="app">
  <div ng-controller="myController as ctrl">
    <p>
      Model is not updated on second down button push. Repro:
,      <ol>
        <li>Tab to select element</li>
        <li>Hit down and notice the optionId updated to 1</li>
        <li>Hit down again and notice that the displayed value changes to B, but optionId stays as 1</li>
        <li>Hit down again and notice that the displayed value changes to C, and optionId changes to 3</li>
        <li>Hit up and notice that displayed value changes to B, and optionId changes to 2</li>
      </ol>
      Why doesn't the optionId = 2 on the initial selection of B
    </p>
    <select id="mySelect" ng-options="item.Id as item.Value for item in ctrl.options" ng-model="ctrl.optionId" style="width:200px">
    </select>
    <div><strong>optionId: {{ctrl.optionId}}</strong>
    </div>
  </div>
</body>

¿Por qué no se actualiza el modelo en la segunda flecha hacia abajo?

Actualizar Aquí hay un saqueador que exhibe el comportamiento,http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info

2da actualización Aquí está unsaqueador modificado que implementa la solución propuesta por Matt. Esta solución provoca el comportamiento deseado en Chrome, Firefox e Internet Explorer