AngularJS - multiple class ng-class

Have multiple conditions within the ng-class object

HTML

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

<button ng-click="insertDiv()">insert</button>
        <button ng-click="insertDiv('This is a different Message')">insert different message</button>
        
        <div ng-repeat="data in dynamicData" ng-class="{'red' : areaStatus, 'green' : !areaStatus}">
            {{data.value}}
        </div>
    </div>
</div>

CSS

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

JavaScript

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

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

    $scope.areaStatus = false;
    
    $scope.dynamicData = [];
    

$scope.insertDiv=function(message) {
    if (message)
    {
        $scope.dynamicData.push({value : message})
    }
    else{
    $scope.dynamicData.push({value: "This is more text"});
    }
}


});