javascript - Bind ng-options value and label to ng-model -

i'm using ng-options generate select tag options locations. labels location names, , values location id (in database).

i've bound value (location id) ng-model attribute, i'd bind label (location name) different ng-model attribute. (i need separate id field since posted server expects particular attribute.) what's best way in angular?

my code:

<div ng-app="app"><div ng-controller="edit">   <select ng-model="purchase.pickuplocationid" ng-options="loc.id loc.name loc in purchase.availablelocations"></select>    <!-- model not yet bound: -->   <p>you have selected {{ purchase.pickuplocationname }}</p>  </div></div> 

---

var app = angular.module('app', []);  app.controller('edit', ['$scope', function($scope) {     $scope.purchase = {         pickuplocationid: 30,         availablelocations: [             {id: 20, name: "charleston, sc"},             {id: 30, name: "atlanta, ga"},             {id: 40, name: "richmond, va"},         ]     }; }]); 

you can change following , bind entire object. you'll still have access id later on whatever wish it

<select ng-model="selected" ng-options="loc loc.name loc in purchase.availablelocations"></select> 

---

<p>you have selected {{ selected.name }}</p> <p>you havd id too! {{ selected.id }}</p> 

jsfiddle link