ng-class example

function MyCtrl($scope){

  $scope.styleSet={
		"Blue font with Red background": "blueFont redBg",
		"Blue font with Green background": "blueFont greenBg",
		"Blue font with Grey background": "blueFont greyBg"
	};

	/*=======================================================================
	List of students and their marks
	=========================================================================*/
	$scope.studentList = [
	{
		name: "Michael",
		marks: 97			
	},
	{
		name: "Doherty",
		marks: 21			
	},
	{
		name: "Toshish",
		marks: 84			
	},
	{
		name: "Tim",
		marks: 32			
	},
	{
		name: "Anirudh",
		marks: 59			
	},
	{
		name: "Joseph",
		marks: 91			
	},		
	{
		name: "Jenny",
		marks: 99			
	},
	{
		name: "Igor",
		marks: 52			
	},
	{
		name: "Ian",
		marks: 66			
	},
	{
		name: "Lee",
		marks: 87			
	}
	];
}

<!doctype html>
<html>
<head>
  <title>ng-class</title>

	<meta charset="utf-8"/>
	<meta name="application-name" content="ng-class example"/>

	<style>
		.redBg{
			background-color: tomato;
		}
		.greenBg{
			background-color: lightgreen;
		}
		.greyBg{
			background-color: grey;
		}
		.blueFont{
			color: blue;
		}
	</style>

	<script type="text/javascript" 
	src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"> </script>

	<script src="myController.js"> </script>
</head>

<body ng-app ng-controller="MyCtrl">
	<table border="1" width="300">
		<thead>
			<tr>
				<th>Name</th>
				<th>Marks</th>
			</tr>
		</thead>	

		<tbody>
			<!-- We have provided ng-class an javascript object inside double quotes.
			Each classname is key in the object and if it has to be applied to the current element its value is given as true.
			-->
			<tr ng-repeat="student in studentList" ng-class="{blueFont:true, redBg: student.marks<40, greenBg: student.marks>90}">
				<td>{{student.name}}</td>
				<td>{{student.marks}}</td>
			</tr>
		</tbody>

	</table>

	<!-- =====================================================================
	Another example of how to use ng-class
	====================================================================== -->
	<br/><br/><br/>
	<span> Choose a theme to highlight paragraph below &nbsp;&nbsp;&nbsp;</span>
	<select ng-model="selectedTheme">
		<option value="{{css}}" ng-repeat="(themeName,css) in styleSet">{{themeName}}</option>
	</select>

	<p ng-class="selectedTheme">Theme is applied on this text</p>
</body>
</html>