title: adding or removing classes based on route changes in angular
body: <p><a href="https://i.stack.imgur.com/wGIl5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wGIl5.jpg" alt="enter image description here"></a>I have 3 routes containing 3 forms 
  Im trying to set bootstrap active class on current tab based on the current route in angular.I used angular route module.
  How can I achieve this.
  I m attaching the js code please check and help please </p>
  
  <pre><code>            angular.module('bankAppOnline',     ['ngSanitize','ngRoute','ngAnimate','ngQuantum'])
                  .config(['$routeProvider',
                      function($routeProvider) {
                          $routeProvider.
                          when('/firststep', {
                              templateUrl: 'templates/firstformtemplate.html',
                              controller: 'firstformCtrl',
                              containerClass: 'active'
  
                          }).
                          when('/secondstep', {
                              templateUrl: 'templates/secondformtemplate.html',
                              controller: 'secondformCtrl',
                              containerClass: 'active'
  
  
                          }).
                          when('/thirdstep', {
                              templateUrl: 'templates/thirdformtemplate.html',
                              controller: 'thirdformCtrl',
                              containerClass: 'active'
  
                          }).
                          otherwise({
                              redirectTo: '/firststep'
                          });
                      }])
                 .run(function($rootScope){
  
                  $rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
                      console.log(event);
                      console.log(toState);
                      console.log(fromState);
                      console.log(toParams);
                      $rootScope.containerClass = toState.containerClass;
                  });
  
              })
                  .controller('Main-Ctrl',function($scope)
              {
                  $scope.containerClass =  "active";
              })
                  .controller('firstformCtrl', function ($scope, Customer) {
  
                     $scope.cities = ['Hyderabad','Vizag','Vijayawada','Bangalore','Delhi','Mumbai','Chennai','Noida','Pune','Tirupathi'];
                     $scope.professions = ['Doctor','Teacher','Engineer','Lawyer'];
                     $scope.customer = Customer.get();
                   $scope.reset = function() {
  
  
                      $scope.firstform.$setPristine();
                         var restore = {
                          "firstname": "",
                          "lastname": "",
                          "age": "",
                          "city": "",
                          "profession": "",
                          "mobile": ""
                      };
                      angular.extend($scope.customer, restore);
  
                  }  
                })
                .controller('secondformCtrl', function ($scope, Customer) {
                    $scope.designations = ['ChairmanVice Chairman',
              'Chairman cum Managing Director',
              'Managing Director',
              'Sr. Vice president',
              'Vice President',
              'General Manager',
              'Joint General Manager',
              'Deputy General Manager',
              'Asst. General Manager',
              'Chief Manager',
              'Sr. Manager',
              'Manager',
              'Joint Manager',
              'Deputy Manager',
              'Asst. Manager',
              'Sr. Officer',
              'Officer',
              'Jr. Officer',
              'Sr. Associate',
              'Associate',
              'Jr. Associate',
              'Assistant' ];
                  $scope.customer = Customer.get();
                   $scope.reset = function() {
  
                      $scope.secondform.$setPristine();
                           var restore = {
                          "pan":"",
                           "income":"",   
                           "company":"",
                           "designation":"",
                           "address":"",
                           "pin":""
                      };
                      angular.extend($scope.customer, restore);
  
                  }  
                })
                  .controller('thirdformCtrl', function ($scope,$http,Customer,$alert) {
  
                  $scope.accounts = ['Savings','Basic checking','Interest-bearing','Market-Deposits','Certificates of deposit'];
                  $scope.customer = Customer.get();
                    $scope.reset = function() {
                      $scope.thirdform.$setPristine();
                         var restore = {
                         "accountType":"" ,
                   "fdCheck":false,
                   "creditcardCheck":false
                      };
                      angular.extend($scope.customer, restore);
  
                  };
                      $scope.sendPost = function() {
                         var data =  $scope.customer;
                          console.log($scope.customer);
                          $http.post("/users", data).success(function(data, status) {
                              $scope.status = status;
  
                                  $alert('form saved successfully.','Oley!', 'success', 'top-right');
  
                              console.log($scope.status);
                          })
                              .error(function(response, status){
                                  //$alert(options)
                                  //for using more option create object
                                  $alert({title:'Error', content:'An error occured',placement:'top-right',alertType:'danger'});
                              })
                      };
  
                  })
                .factory('Customer', function () {
                  var customer = {
                      "firstname": "",
                      "lastname": "",
                      "age": "",
                      "city": "",
                      "profession": "",
                      "mobile": "",
                      "accountType": "",
                      "fdCheck": false,
                      "creditcardCheck": false,
                      "pan": "",
                      "income": "",
                      "company": "",
                      "designation": "",
                      "address": "",
                      "pin": ""
                  };
  
                  return {
                    get: function () {
                      return customer;
                    }
                  }
                });
  </code></pre>