<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJs ng-class Expression Syntax</title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
  <script>
    var app = angular.module('ngClassApp', []);
    app.controller('ngClassCtrl', function($scope) {

    });
  </script>
</head>

<body ng-app="ngClassApp" ng-controller="ngClassCtrl">
  <h1>AngularJs ng-class Expression Syntax</h1>
  <div>
    <a ng-click="flags =! flags">
      <span ng-class="{active : flags}">
        <h4>Click and See the flags Result <br>Class flag: {{flags}}</h4>
      </span>
    </a>
  </div>
  <div><a href="http://www.code-sample.com/2014/10/css-binding-in-angularjs.html">Know about detail..</a></div>
</body>

</html>
.active {
    color: #006400;
}