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>                
    </div>
</div>

CSS

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

JavaScript

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

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

    $scope.areaStatus = false;
    

$scope.insertDiv=function() {
    var myEl = angular.element( document.querySelector( '#box' ) );
    var div = angular.element('<div ng-class=\"{\'red\' : areaStatus, \'green\' : !areaStatus}\">This is more text</div>');
            myEl.append(div);

}


});