Selecionar elemento no modelo angular que não atualizaValor na segunda seleção

Question

Aug 12, 2015, 12:22 AM

Selecionar elemento no modelo angular que não atualizaValor na segunda seleção

Eu tenho um elemento de seleção vinculado a um modelo em uma vista angular. Ao preencher o formulário com o teclado, notei que se você seta para baixo para a segunda opção o valor, o modelo ainda representa o primeiro valor. Isso só acontece ao usar o teclado para preencher o formulário.

A configuração é bem simples, usando o 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 que o modelo não é atualizado na segunda seta para baixo?

Atualizar Aqui está um desentupidor que exibe o comportamento,http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info

2ª Atualização Aqui está umplunker modificado que implementa a solução alternativa proposta por Matt. Esta solução alternativa causa o comportamento desejado no Chrome, Firefox e Internet Explorer