ng-select issue

Can't manually set selected value in ng-select with object data source

by wittwerj

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <select ng-options="id*1 as name for (id, name) in items" 
        
    ng-model="selected"></select>
    <div>Selected ID: {{selected}} </div>
    <button ng-click="setSelected(1)">Set Selected to ID 1 as Integer</button>
    <button ng-click="setSelected(2)">Set Selected to ID 2 as Integer</button>
    <div>Programmatically setting the ng-model as string sets the dropdown but not as integer.</div>
    

</div>

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.items = {1: 'a', 2: 'b', 111: 'e', 3:'c', 20: 'd'};
    console.log($scope.items);
    console.log('keys', Object.keys($scope.items));
    
    $scope.keys = Object.keys( $scope.items);
    
    for(var i = 0; i < $scope.keys.length; i++)
        console.log('key' + i, typeof $scope.keys[i]);
    
    angular.forEach($scope.items, function(value, key) {
        console.log(typeof key);
    });
    
    $scope.selected = null;
    $scope.setSelected = function(id) {
        $scope.selected = id 
    }
}