Angular.js ng-options – bind to key instead of object

In an Angular.js application we are building I had the following situation:

I have an array of option objects containing a label and a value that is used as input for a select list. On my controller I want to bind to the selected value (and not to the selected object!).

Here is the controller:

	'use strict';
	(function (app) {
	var sampleController = function ($scope) {
	$scope.selectedValue = 2;
	$scope.options = [
	{ label: 'one', value: 1 },
	{ label: 'two', value: 2 }
	];
	app.controller('sampleController', ['$scope',sampleController]);
	}(angular.module('sampleApp')));

view raw controller.js hosted with ❤ by GitHub

First I had the following code in  the view:

	<select ng-model="selectedValue"
	ng-options="opt.label for opt in options track by opt.value">
	</select>
	The value selected is {{ selectedValue }}.

view raw wrong.html hosted with ❤ by GitHub

The above code resulted in the selectedValue set to the complete option object and not to the option.value property.

To fix it, I had to update the view code to the following:

	<select ng-model="selectedValue"
	ng-options="opt.value as opt.label for opt in options">
	</select>
	The value selected is {{ selectedValue }}.

view raw correct.html hosted with ❤ by GitHub