AngularJS - get properties of selected option in dropdown

Issue

Starting out on Angular and using select dropdowns are really confusing me. Basically I am getting JSON object using an AJAX call and then populating my form with JSON using AngularJS.

For the dropdown, the settings.metric = '2' from database. So the selected is "cm".

My question is, how do I get the currently selected option and its datavalue? I tried scope.settings.metric but all that gives me is "2". I like to get the other properties of the selected such as name and datavalue.

$scope.metrics = [
            {id:1,name:'in',value:'1',datavalue:'in'},
            {id:2,name:'cm',value:'2',datavalue:'cm'},
            {id:3,name:'px',value:'3',datavalue:'px'},
            {id:4,name:'pt',value:'4',datavalue:'pt'}
            ];

<select 
    ng-model="settings.metric" // this is 2 from database call
    ng-options="p.value as p.name for p in metrics" >
</select>

Solution

This is pretty simple with what you already have. You have to write this.

ng-options="p as p.name for p in metrics"

The first parameter 'p' is the value that will be stored. The second parameter 'p.name' is the value displayed in the option.

Answered By - Zack Argyle