Focus on select option
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js"></script>
<div ng-controller="csrClrt">
<md-input-container>
<label>Face Style:</label>
<md-select ng-model="style" ng-change="f_style()" ng-model-options="{trackBy: '$value.id'}">
<md-option ng-value="user" ng:repeat="user in styles">{{user.name}}</md-option>
</md-select>
</md-input-container>
<div>
Id:{{style.id}}
<br/>
Want to Display Name {{style.name}}
</div>
</div>
JavaScript
angular.module('MyApp', ['ngMaterial'])
.controller('csrClrt', function ($scope) {
stylesdata=[{name:"a",id:0},{name:"b",id:1},{name:"c",id:3}];
var style=[];
for(var i=0;i<stylesdata.length;i++)
{
style.push({
name:stylesdata[i].name,
id:stylesdata[i].id
})
}
$scope.styles=style;
})