var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.BankNames =[{"bankName":"ICICI Bank","isDisabled":true},
{"bankName":"HDFC Bank","isDisabled":true},
{"bankName":"HSBC Bank","isDisabled":false},
{"bankName":"Bank of America","isDisabled":false},
{"bankName":"Royal Bank of Scotland","isDisabled":false},
{"bankName":"CitiBank","isDisabled":false},
{"bankName":"Barclays","isDisabled":false},
{"bankName":"DBS Bank","isDisabled":false}];
});
<!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>
Using Filter with ng-options
</H1>
<select
ng-options="banks.bankName as banks.bankName disable when banks.isDisabled for banks in BankNames |filter:{isDisabled:false}"
ng-model="myBank">
<option value="">Select a Bank</option>
</select>
</body>
</html>
/* Put your css in here */