I'm trying to read the selected option name/text/html in a drop down, as opposed to its value via angular.js. Here is how I do it, but this returns the value, not the name:

In my html

<select class="SelectCar" ng-model="SelectedCar"> 
   <option ng-repeat="car in cars" value="{{car.Guid}}">
      {{car.Name}}
   </option>
</select>

In my controller

var car = $scope.SelectedCar;

The value of "car" will be the car.Guid, but I'd like to return the car.Name instead. I can't remove the car.Guid for the value, since this Guid is used by another ponent in my app.

I'm trying to read the selected option name/text/html in a drop down, as opposed to its value via angular.js. Here is how I do it, but this returns the value, not the name:

In my html

<select class="SelectCar" ng-model="SelectedCar"> 
   <option ng-repeat="car in cars" value="{{car.Guid}}">
      {{car.Name}}
   </option>
</select>

In my controller

var car = $scope.SelectedCar;

The value of "car" will be the car.Guid, but I'd like to return the car.Name instead. I can't remove the car.Guid for the value, since this Guid is used by another ponent in my app.

• javascript
• html
• angularjs

• docs.angularjs/api/ng.directive:select – Matt Whipple Commented Jul 21, 2013 at 15:33

1 Answer 1

You need to use "as" from ng-options. It allows you to display one value while storing another. Take a look at the code block below:

From my controller:

$scope.cars = [
    {name:'Nissan', guid:'1-9'},
    {name:'Toyota', guid:'1-23'},
    {name:'Ford', guid:'8-43'},
    {name:'Honda', guid:'2-6'},
    {name:'Datsun', guid:'1-55'}
];
$scope.selectedCar = $scope.cars[1].guid;

From my HTML:

<select ng-model="selectedCar" ng-options="car.guid as car.name for car in cars"></select>
<div>
    Selected Color: {{selectedCar}}   
</div>

And here is a jsFiddle