limichange/index.html

## index.html
<!doctype html>
<html lang="en" ng-app>
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
		.error {
			background-color: red;
		}

		.warning {
			background-color: yellow;
		}
	</style>
</head>
<body>

	<div ng-controller="HeaderController">
		<div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
		<button ng-click='showError()'>Simulate Error</button>
		<button ng-click='showWarning()'>Simulate Warning</button>
	</div>

	<script type="text/javascript" src="angular.min.js"></script>
	<script type="text/javascript" src="main.js"></script>
</body>
</html>

## index.js
function HeaderController($scope) {
	$scope.isError = false;
	$scope.isWarning = false;

	$scope.showWarning = function() {
		$scope.isError = false;
		$scope.isWarning = true;
		$scope.messageText = 'this is a warning';
	}

	$scope.showError = function() {
		$scope.isError = true;
		$scope.isWarning = false;
		$scope.messageText = 'this is a error';
	}
}
	<!doctype html>
	<html lang="en" ng-app>
	<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
	.error {
	background-color: red;
	}

	.warning {
	background-color: yellow;
	}
	</style>
	</head>
	<body>

	<div ng-controller="HeaderController">
	<div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div>
	<button ng-click='showError()'>Simulate Error</button>
	<button ng-click='showWarning()'>Simulate Warning</button>
	</div>

	<script type="text/javascript" src="angular.min.js"></script>
	<script type="text/javascript" src="main.js"></script>
	</body>
	</html>
	function HeaderController($scope) {
	$scope.isError = false;
	$scope.isWarning = false;

	$scope.showWarning = function() {
	$scope.isError = false;
	$scope.isWarning = true;
	$scope.messageText = 'this is a warning';
	}

	$scope.showError = function() {
	$scope.isError = true;
	$scope.isWarning = false;
	$scope.messageText = 'this is a error';
	}
	}