rotating fa icon

Assuming you have imported Angular Js and FontAwesome in your HTML, below is how my controller looks like:

Controller

Hide   Copy Code

angular.module('switchdemo', []).controller('DemoController', function($scope){
  
  $scope.init = function(){
    $scope.status = true;
  }
  
  $scope.changeStatus = function(){
    $scope.status = !$scope.status;
  }
  
})

HTML

Hide   Copy Code

body ng-app="switchdemo">
  <h1>On Off switch using Angular JS</h1>
  <div ng-controller="DemoController" ng-init="init()">
    <div class="well">
      <i class="fa fa-toggle-on active"
         ng-if="status == true" 
         ng-click="changeStatus();">
      </i>
      <i class="fa fa-toggle-on fa-rotate-180 inactive"
         ng-if="status == false"
         ng-click="changeStatus();">
      </i>
    </div>
    <pre>{{ status }}</pre>
  </div>
</body>

CSS

Hide   Copy Code

.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}

resource from : https://www.codeproject.com/Tips/854988/Create-an-ON-OFF-switch-using-Angular-JS-and-FontA

Demo

I have created a demo on plunkr with this code, here is the link to it: http://plnkr.co/edit/Kc8M3enHJB7iwFRyGUDr?p=preview