Controlling CSS using AngularJS

Controlling CSS using AngularJS

I am trying to control CSS through AngularJS. I am using ng-class and
ng-click for this purpose ..... I have made two function showError and
showWarning for this purpose. I am try to change CSS through setting their
properties true and false respectively
--------CSS---------
.error {
background-color: red;
}
.warning {
background-color: orange;
}
-------HTML---------
<div>
<h2> {{ message }} </h2>
<ul>
<li class="menu-disabled-{{ isDisabled }}" ng-click="stun()">
Stun</li>
</ul>
<div class='{ warning : {{ isWarning }}, error : {{ isError }} }'>
{{ messageText }}</div>
<button ng-click="showError()"> Simulate Error</button>
<button ng-click="showWarning()">Simulate Warning</button>
</div>
-------JS-----------
$scope.isError = false;
$scope.isWaring = false;
$scope.showError = function(){
console.log("error here");
$scope.messageText = "This is an error";
$scope.isError = true;
$scope.isWaring = false;
}//showError
$scope.showWarning = function() {
console.log("warning here");
$scope.messageText = "Just a Warning, Carry ON !!!";
$scope.isError = false;
$scope.isWaring = true;
}//showWarning
I am successful to access the function and printing the messageText using
ng-click but can't change the CSS properties////