ng-select gives only string, but I want an integer
There is an easier way:
Just use value*1 as your id, that will convert the string to int without changing the value... assuming the id is an integer.
so the result is>
<div ng-app ng-controller="MyCtrl"> <select ng-model="selectedItem" ng-options="selectedItem*1 as selectedItem for selectedItem in values"></select> selectedItem: {{selectedItem}}</div>This will work in more cases, since indexOf is not available in objects, only in arrays. This solution works for objects with integers as keys (for example if some keys are missing, or if you use db ids)
Most solutions discussed here require using the ngOptions directive instead of using static <option> elements in the HTML code, as was the case in the OP's code.
Angular 1.6.x
Edit If you use Angular 1.6.x, just use the ng-value directive and it will work as expected.
angular.module('nonStringSelect', []).run(function($rootScope) { $rootScope.model = { id: 2 };})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script><div ng-app="nonStringSelect"> <select ng-model="model.id"> <option ng-value="0">Zero</option> <option ng-value="1">One</option> <option ng-value="2">Two</option> </select> {{ model }}</div>Older versions
There is a way to make it work while still using static elements. It's shown in the AngularJS select directive documentation.
The idea is to use a directive to register a parser and a formatter on the model. The parser will do the string-to-int conversion when the item is selected, while the formatter will do the int-to-string conversion when the model changes.
Code below (taken directly from the AngularJS documentation page, credit not mine).
angular.module('nonStringSelect', []).run(function($rootScope) { $rootScope.model = { id: 2 };}).directive('convertToNumber', function() { return { require: 'ngModel', link: function(scope, element, attrs, ngModel) { ngModel.$parsers.push(function(val) { return parseInt(val, 10); }); ngModel.$formatters.push(function(val) { return '' + val; }); } };});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script><div ng-app="nonStringSelect"> <select ng-model="model.id" convert-to-number> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> </select> {{ model }}</div>
I've just had the same problem and figured out the right way to do this - no 'magic' required. :)
function MyCtrl($scope) { $scope.values = [ {name : "Daily", id : 1}, {name : "Weekly", id : 2}, {name : "Monthly", id : 3}, {name : "Yearly", id : 4}]; $scope.selectedItem = $scope.values[0].id;}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script><div ng-app ng-controller="MyCtrl"> <select ng-model="selectedItem" ng-options="selectedItem.id as selectedItem.name for selectedItem in values"></select> selectedItem: {{selectedItem}}</div>