Angularjs ng-options using number for model does not select initial value

Angular's documentation for the ng-select directive explains how to solve this problem. See https://code.angularjs.org/1.4.7/docs/api/ng/directive/select (last section).

You can create a convert-to-number directive and apply it to your select tag:

JS:

module.directive('convertToNumber', function() {  return {    require: 'ngModel',    link: function(scope, element, attrs, ngModel) {      ngModel.$parsers.push(function(val) {        return val != null ? parseInt(val, 10) : null;      });      ngModel.$formatters.push(function(val) {        return val != null ? '' + val : null;      });    }  };});

HTML:

<select ng-model="model.id" convert-to-number>  <option value="0">Zero</option>  <option value="1">One</option>  <option value="2">Two</option></select>

Note: I found the directive from the doc does not handle nulls so I had to tweak it a little.

Maybe it's a bit messy, but result can be achieved without special functions right in ng-options

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="+(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>

It's because when you get the unit.id it's returning a string not an integer. Objects in javascript store their keys as strings. So the only way to do it is your approach of surrounding 4 by quotations.

Edit

<select ng-model="ctrl.selectedUnitOrdinal" ng-options="convertToInt(unit.id) as unit.text for unit in ctrl.unitsOptions"></select>$scope.convertToInt = function(id){    return parseInt(id, 10);};