AngularJS - multiple class ng-class

Have multiple conditions within the ng-class object

by Ravindra Athreya

HTML

<div ng-app="myModule">
    <div ng-controller="myController">
        <button ng-click="areaStatus = !areaStatus">Toggle</button>
        <div ng-class="{'red' : areaStatus, 'green' : !areaStatus}">
            This is some text - {{areaStatus}}
        </div>
    </div>
</div>

CSS

.red {
    color:red;
}
.green {
    color:green;
}

JavaScript

var myModule = angular.module('myModule', []);

myModule.controller('myController', function ($scope) {

    $scope.areaStatus = false;
});