JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app>
    <p>
    model.selected is defined since the start. However, model.yellow is not defined until you press the second checkbox. Only at that point AngularJS will release the ngClass watcher.
    </p>
    
    <div ng-init="model = {selected: true}">
        <div ng-class="::{selected: model.selected, yellow: model.yellow}">Red if selected, blue if not.</div>
        <input type="checkbox" ng-model="model.selected"/>
        <input type="checkbox" ng-model="model.yellow"/>
    </div>
</div>

CSS

body { color: blue; }
p { color: black; }
.selected { color: red }
.yellow { color: yellow; }