javascript - マウスの代わりに矢印キーボードを使用すると、ng-options モデルが更新されない

Question

私はjsフィドルを作成しました：フィドル

いくつかの ng-options を含むフォームを作成しましたが、マウスの代わりにボタンを使用すると奇妙な動作が発生します (テキストボックスをクリックして「タブ」を押すと、矢印キーを使用して選択できます)。

<form ng-controller="MyApp" id="Apps" name="Apps" ng-submit="SendApp()" role="form" novalidate>
    <input type="text" name="title" ng-model="Info.Title" />
    <select id="Formula" ng-model ="Info.Genre" ng-change= "ChangeGenre()"
                        ng-options="id as name for (id, name) in Genre" blank></select>
     <select class="form-control" ng-model ="Info.Program" 
                        ng-options="Program as Name for (Program, Name) in Program" ng-change="ChangeProgram()" blank></select>
    <h3>{{Info.Genre}}</h3>
    <h3>{{Info.Program}}</h3>
    <button type=submit>Submit this </button>
</form>

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);
    }
}]);

First try で最初のオプションを選択すると、ng-model は更新されません。

何が問題で、これを修正する方法は?

Update:

以下のコメントで言及されているように、再現するには、マウスをテキストフィールドに入力し、タブでコンボボックスに移動し、キーボードを使用して 2 番目のオプション (スリラー) を選択してみてください。これは最初の試行では失敗します。3 番目または最初のオプションが選択されると、2 番目のオプションも認識されます。