<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="main.css" />
</head>
<body ng-controller="AppController">
<select ng-model="Blah">
<option ng-repeat="person in persons" ng-class="{red: person.Eligible}" ng-selected="{Blah == person.Name}">{{person.Name}}</option>
</select>
</body>
</html>
.red {
color: red;
}
var app = angular.module('plunker', []);
app.controller('AppController',
[
'$scope',
function($scope) {
$scope.persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
];
$scope.Blah = 'Sam';
}
]
);