<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@2.0.0-alpha.31" data-semver="1.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
var appMod = angular.module('myapp', []);
appMod.controller('myController', ['$scope', function($scope) {
$scope.DefaultOptions = ["First", "Second", "Third", "Fourth"];
$scope.chosen = {}
}]);
</script>
</head>
<body ng-app="myapp" ng-controller="myController">
<div>
<select ng-options="o as o for o in DefaultOptions" ng-model="chosen.value"></select>
</div>
<div>
Chosen Value: <span ng-bind="chosen.value"></span>
</div>
<hr> Instructions:
<br> 1. In Chrome(not in Firefox!), select the dropdown with mouse and choose "First". Observe that the dropdown and binded value, both are showing "First" value
<br> 2. Then press downarrow.
<br> 3. Observe that the dropdown shows "Second" while the dynamically binded value still shows "Frist"
<br> 4. Press downarrow again.
<br> 5. Now both the dropdown as well as binded field are showing "Third".
<br> 6. Clearly, there is some "magic" happening in angular with respect to second keydown event or is the ng-options used incorrectly?<br>
7. This happens always, even if you choose "Third" instead of "First" in first step.
<br>
</body>
</html>
// Code goes here
/* Styles go here */