var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.BankNames =[
{"bankId":1,"bankName":"ICICI Bank"},
{"bankId":2,"bankName":"HDFC Bank"},
{"bankId":3,"bankName":"HSBC Bank"},
{"bankId":4,"bankName":"Bank of America"},
{"bankId":5,"bankName":"Royal Bank of Scotland"},
{"bankId":6,"bankName":"CitiBank"},
{"bankId":7,"bankName":"Barclays"},
{"bankId":8,"bankName":"DBS Bank"},
{"bankId":9,"bankName":"XYZ Bank"},
{"bankId":10,"bankName":"XYZ Bank"}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>
Selecting a dropdown item with name
</h1>
<select ng-options="banks.bankName for banks in BankNames"
ng-model="myBank">
<option value="">Select a Bank</option>
</select>
<br />
Id of the Selected Bank is :
{{myBank}}
<h1>
Selecting a dropdown item with name & track by $index
</h1>
<select ng-options="banks.bankName for banks in BankNames track by $index"
ng-model="myBank2">
<option value="">Select a Bank</option>
</select>
</body>
</html>
/* Put your css in here */