Angular.js: Track selected item by id not by reference

Using Angular.js I created a form where a user could select a value. The selected value is then bound to a property on the controller.

Here is the corresponding code:

	"use strict";
	(function (app) {
	var selectApplicationController = function ($scope,applicationsService) {
	$scope.name = "Step 1 - Specify application";
	$scope.application={};
	applicationsService.getApplications()
	.then(function (response) {
	$scope.applications = response.data;
	}).catch(function (data) {
	$scope.applications = null;
	});
	};
	app.controller("selectApplicationController", selectApplicationController);
	}(angular.module("sampleApp")));

view raw selectAplicationController.js hosted with ❤ by GitHub

	<div class="row">
	<div class="span4">
	<label for="Application">Application</label>
	</div>
	<div class="span8">
	<div class="input-control select">
	<select ng-model="application" ng-options="application.name for application in applications" />
	</div>
	</div>
	</div>

view raw selectapplication.html hosted with ❤ by GitHub

The problem is that the moment I leave the screen and come back the dropdown no longer has an item selected. When searching through the Angular.js documentation I found the following important note:

When leaving the screen and coming back, the data is fetched again from the server, so the selected application object is no longer pointing to the same object as the application objects in the list.

To fix this you can use the ‘track by’ option inside the binding expression: