Angular JS ng-model not initiating properly for the first time

Question

I am using Angular JS ng-model to track the selected value of the select tag.

here's the example http://jsfiddle.net/8853oxb1/3/

function ControllerA($scope) {
    $scope.optionsArray = [1,2,3,4,5];
    $scope.optionsObject = {"India" : "IN" , "Singapore" : "SG", "Malaysia" : "MY", "Indonesia" : "INDY"};

}

If, I go to a dropdown by using a tab key and try to press "I" twice to select the second option starting with I, the dropdown value updates as expected, bu the ng-model just takes the value of the first option with "I". A bug in angular js or am I doing something wrong here?

Answer 1

Have a look to the following jsfiddle

The main difference with your code is the way the dropdown is built.

Instead of feeding it with a single object

$scope.optionsObject = {"India" : "IN" , "Singapore" : "SG", "Malaysia" : "MY", "Indonesia" : "INDY"};

you have to change your data into something different, for instance, an array of object, like this:

$scope.optionsObject = [ { name: "India", code: "IN" }, { name: "Singapore", code: "SG" }, { name: "Malaysia", code: "MY" }, { name: "Indonesia", code: "INDY" } ];