I Created js fiddle: Fiddle

I create a form with some ng-options in it, and it have strange behavior when you use the button instead of mouse (just click on the textbox and press "tab" and you can select it using arrow key).

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

The ng-model are not updated when you select the first options on First try.

What's Wrong, and How To Fix this?

Update:

As Mentioned on ment below, To reproduce, enter mouse into textfield, tab to bobox and try to select the second option (Thriller) using keyboard. This will fail on the first attempt, once the third or first option is selected, the second option is also recognized.

I Created js fiddle: Fiddle

I create a form with some ng-options in it, and it have strange behavior when you use the button instead of mouse (just click on the textbox and press "tab" and you can select it using arrow key).

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

The ng-model are not updated when you select the first options on First try.

What's Wrong, and How To Fix this?

Update:

As Mentioned on ment below, To reproduce, enter mouse into textfield, tab to bobox and try to select the second option (Thriller) using keyboard. This will fail on the first attempt, once the third or first option is selected, the second option is also recognized.

• javascript
• jquery
• html
• angularjs
• ng-options

• 1 I tested your fiddle using Chrome 33.0.1750.154 m and can't find anything not working. What kind of behavior are you expecting that isn't there? – Sonata Commented Mar 25, 2014 at 10:06
• did you try it using arrow key in the keyboard? And the alert will not fired when you try choose the second item, and then worked again in third items. I updated the fiddle to use alert. – reptildarat Commented Mar 25, 2014 at 10:47
• 1 Ah, the error is only on the first try: To reproduce, enter mouse into textfield, tab to bobox and try to select the second option (Thriller) using keyboard. This will fail on the first attempt, once the third or first option is selected, the second option is also recognized. This seems to be a long running issue: github./angular/angular.js/issues/2616 github./angular/angular.js/issues/4303 github./angular/angular.js/issues/4216 – Sonata Commented Mar 25, 2014 at 11:05
• Just noticed this odd behavior today. It does indeed only occur on the first attempt to change the value using the arrow keys. Subsequent changes work without a problem. I am using Angular 1.2.24. – Christophe Geers Commented Sep 17, 2014 at 3:52
• I've submitted a new issue to follow up on this - github./angular/angular.js/issues/9201 – Sasha Commented Sep 21, 2014 at 12:31

1 Answer 1

Using the the directive proposed here, this works for me:

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

I forked the fiddle.