使用箭头键盘而不是鼠标时，ng-options模型未更新

我创造了js小提琴： 小提琴

我创建了一个带有一些ng-options的表单，当你使用按钮而不是鼠标时它会有奇怪的行为（只需单击文本框并按“tab”，你就可以使用箭头键选择它）。

    
{{Info.Genre}}
 
{{Info.Program}}
 Submit this   

使用Javascript：

 var theApp = angular.module("TheApp", []); theApp.controller("MyApp", ['$scope', function($scope){ $scope.Program = {"1":"Music","2":"Theater","3":"Comedy"}; $scope.Genre = {"1":"Mystery", "2":"Thriller", "3":"Romance"}; $scope.ChangeProgram = function(){ alert($scope.Info.Program + " " + $scope.Info.Genre); } $scope.ChangeGenre = function (){ console.log($scope.Info.Genre); } $scope.SendApp = function(){ alert($scope.Info.Program + " " + $scope.Info.Genre); } }]); 

在第一次尝试时选择第一个选项时，不会更新ng模型。

什么是错的，以及如何解决这个问题？

 Update: 

正如下面的评论中提到的，要重现，请将鼠标输入文本字段，选项卡到combobox并尝试使用键盘选择第二个选项（Thriller）。 这将在第一次尝试时失败，一旦选择了第三个或第一个选项，也会识别第二个选项。

Answer 1

使用这里提出的指令，这对我有用：

 theApp.directive("select", function() { return { restrict: "E", require: "?ngModel", scope: false, link: function (scope, element, attrs, ngModel) { if (!ngModel) { return; } element.bind("keyup", function() { element.triggerHandler("change"); }) } } }) 

我把小提琴分开了 。