init variables html-local scope

ng-class.html

<!-- Add class  ng-modal -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!</div>

<!-- Add the class 'text-success' if the variable 'awesome' is true -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">
  
<!-- Using the Ternary Operator -->
<div ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'"></div>

<!-- Example -->
<section ng-init="selected = 'users'">
  <button type="button" ng-class="{'active':selected === 'users'}" ng-click="selected = 'users'">
    Lorem ipsum dolor.
  </button>
  <button type="button" ng-class="{'active':selected === 'items'}" ng-click="selected = 'items'">
    Lorem ipsum dolor.
  </button>
</section>