Angular Directive: ng-class

In AngularJS we use interpolation to change the content of an HTML document.  One way to change the format of the content based on model conditions is by use of the ng-class directive.  This directive takes a JSON object made of key-value pairs where the key is a class name and the value is a boolean javascript expression which will normally involve the model.

<div ng-controller="mainController">
    <div class="alert" ng-class="{ 'alert-warning': var.length <= characters, 'alert-danger': var.length > characters }" >
    ... content ...
    </div>
</div>