AngularJs Select ng-model not working with foreign key value - angularjs

Question

Let's say I have a service that provides a list of objects that I want to load as options in a <select> element.
The service method is myReferenceList.getCachedList().
It returns an array of objects of the following structure:
[
{
ReferenceId: "guid-1234",
ReferenceName: "some string",
SomeRandomRefField: 5
},
// etc...
]
In my controller I have a $scope.dataRow variable defined like so:
$scope.dataRow = {
ReferenceIdFk: "guid-2345",
// etc...
}
I want to load the select option list with data from myReferenceList.getCachedList(), with the displayed text coming from ReferenceName and the non-visible value coming from ReferenceId.
I want to hook this select item up to $scope.dataRow.ReferenceIdFk something like this:
ng-model="dataRow.ReferenceIdFk"
When all is said and done, and the data is loaded into $scope.dataRow.ReferenceIdFk, the select element should hold the selected object's ReferenceId value. When a user selects a different item in the select list, the value in $scope.dataRow.ReferenceIdFk should automagically get changed to the correct value.
How can I get this to work?
Loading the values into the select list is easy. Getting the automagic binding to the underlying data value in $scope.dataRow.ReferenceIdFk just doesn't seem to work.
Obviously, I can hand-jam in some procedural code to make this binding work, but I'm trying to understand how to declaratively make it work using angular features. Is it possible?

Answer 1

ng-options provides a micro-syntax to declare how to map objects in an array to display value and the selected result:
Angular's documentation provides the full syntax, but for your case the following should work:
<select ng-model="dataRow.ReferenceIdFk"
ng-options="i.ReferenceId as i.ReferenceName for i in myReferenceList.getCachedList()">
</select>
In a nutshell, the microsyntax is:
"<valueExp> as <displayExp> for <itemAlias> in <arrayExp>"
where:
arrayExp: is the expression that returns an array of values
itemAlias: is the alias for each item in an array; can be whatever you want
displayExp: a string expression that is used for each label; uses the itemAlias
valueEx: an expression whose value is assigned to ngModel-bound variable; uses itemAlias, and can return either a property of the item (itemAlias.prop as) or the item itself (itemAlias as)