javascript - How to bind both the option's value and text in a drop down list using Angular.JS -

in angular.js, there way bind 2 different ng-models when select drop down option selected?

angular code:

<select ng-model="vm.data.styleid" ng-options="item.id item.name item in vm.getstylesdata.styles">     <option value="">select style</option> </select> 

results in:

<option value="{{item.id}}">{{item.name}}</option> 

with angular code have far, when option selected, save option's value ng-model. in case item.id bound vm.data.styleid.

however in addition this, need bind 'item.name' of selected option. basically, when option selected, need bind both item.id vm.data.styleid, , item.name vm.data.name.

is there easy way using angular.js?

---

solution (using answer lisa p.):

in view:

<select ng-model="vm.styleitem" ng-change="vm.getdetails()" ng-options="item item.name item in vm.getstylesdata.styles">     <option value="">select style</option> </select> 

inside controller:

vm.getdetails = function () {     // set values of select drop down     vm.data.styleid = vm.styleitem.id;      vm.data.style = vm.styleitem.name; } 

you can bind object containing both values

item = { styleid: 23, name: "the name" } vm.data = {{ styleid: ..., name: ... }} 

then bind vm.data with

<option value="{{item}}">{{item.name}}</option>