<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">

  <div class="container" ng-controller="HomeCtrl">
    <div class="jumbotron">
      <img src="http://tech-blog.maddyzone.com/wp-content/uploads/2013/10/maddyzone-logo-300x72.png">
      <br/>
      <h1>Add , Remove and Toggle classes in Angular JS</h1>
      <br/>
      <hr/>
      <label class="alert label-info">Add and remove particular one class</label>
      <hr/>
      <!-- all magic happen here 
       here class_status value will come as a boolean if its true then class add otherwise remove -->
      <div class="alert" ng-class="{'bg-success':class_status }">{{single_message}}</div>

      <a class="btn btn-info" ng-click="addSingleClass()">Add Class</a>
      <a class="btn btn-success" ng-click="removeSingleClass()">Remove Class</a>
      <a class="btn btn-warning" ng-click="toggleSingleClass()">Toggle Class</a>

      <br/>
      <br/>
      <hr/>
      <label class="alert label-info">Add and remove different class</label>
      <hr/>
      <!-- these is for when we want to apply any number of class 
           according to the class_name $scope here class_name  
           value will come in three form blue , red ,green
           then class will apply respectively
           bg-info,bg-danger,bg-success
       -->

      <div class="alert" ng-class="{blue:'bg-info', red:'bg-danger',green:'bg-success' }[class_name]">{{multi_message}}</div>

      <a class="btn btn-info" ng-click="blueClass()"> Blue Class</a>
      <a class="btn btn-danger" ng-click="redClass()">Red Class</a>
      <a class="btn btn-success" ng-click="greenClass()">Green Class</a>
      <br/>
      <br/>

      <a href="http://tech-blog.maddyzone.com/javascript/conditionally-apply-classes-in-angularjs" target="_blank">View Post on Maddyzone </a>

    </div>
  </div>
</body>

</html>
var myApp = angular.module('myApp', []);
// set for Home Controller
myApp.controller('HomeCtrl', function($scope) {
  $scope.class_status = 0;
  $scope.single_message="see the add remove class effect";
  $scope.multi_message="see multi class effect";
  
  
  $scope.toggleSingleClass = function() {
    $scope.class_status = !$scope.class_status;
    $scope.single_message ="class is toggle";
  };
  $scope.removeSingleClass = function() {
    $scope.class_status =0;
    $scope.single_message ="remove class";
  };
  $scope.addSingleClass = function() {
    $scope.class_status = 1;
    $scope.single_message ="add class";

  };
  
  $scope.blueClass = function() {
    $scope.class_name = "blue";
    $scope.multi_message ="Blue Class Added";
  };
  $scope.redClass = function() {
    $scope.class_name ="red";
    $scope.multi_message ="Red Class Added";
  };
  $scope.greenClass = function() {
    $scope.class_name = "green";
    $scope.multi_message ="Green Class Added";

  };

});
/* Styles go here */

Add , Remove and Toggle classes in Angular JS