ngModel is not updated when selection in <select /> is done with keyboard up/down arrows

[Crimscent]

jsFiddle: http://jsfiddle.net/Crimscent/wj3rC/

AngularJS version 1.2.16
Affected browsers: Chrome 35.0.1916.114, FF 29.0.1 (didn't test on earlier versions).
Not affected browsers: IE 9, IE 10, IE 11.

Steps in Chrome:

1. Select Item 1 -> $scope.selectedItem.Id === 1
2. Without losing focus press keyboard down arrow -> $scope.selectedItem.Id === 1
3. Without losing focus press keyboard down arrow -> $scope.selectedItem.Id === 3
   After this 3 steps $scope.selectedItem starts updating as it should

Steps in FF:

1. Select Item 1 -> $scope.selectedItem.Id === 1
2. Without losing focus press keyboard down arrow -> $scope.selectedItem.Id === 1
3. Without losing focus press keyboard down arrow -> $scope.selectedItem.Id === 1
   It doesn't work at all, $scope.selectedItem is updated only when items are selected with mouse.

In IE 9-11 $scope.selectedItem is always updated as it should.

[bchoii]

Note that if ng-model is first initialised as follows, it seems to work correctly.

$scope.selectedItem = $scope.items[0];

[Crimscent]

It seems to work correctly in Chrome if I add <option value=""></option>, but not in FF.

[nikfrank]

this is being caused by a failure to trigger a 'change' event on the first keydown (by jqLite I think) in the directive

I have a workaround (by doing selectElement.trigger('keydown',{which:27}) in a setTimeout0 during keydown event handler in the directive. (27 is esc, which in chrome at least fixes this)

I suppose this isn't the best solution though if there's a keydown listener for esc chars which is now going to be triggered

[Narretz]

Closing as duplicate of #9134