toggle switch angular bootstrap code example

Example: toggle switch angularjs

<div class="container" ng-app="app" ng-controller="mainController">
    
    <div class="btn-switch" ng-class="{'btn-switch--on':toggle.switch}" ng-model="toggle.switch" ng-click="toggle.switch = !toggle.switch">
        
        <div class="btn-switch-circle" ng-class="{'btn-switch-circle--on':toggle.switch}" ng-model="toggle.switch" ng-click="!toggle.switch = toggle.switch"></div>
        
    </div>
</div>
<script>
  var app = angular.module('app', ['ui.bootstrap'])
  app.controller('mainController', function($scope) {

  $scope.toggle = {};
  $scope.toggle.switch = false;

});
</script>
<style>
  .container {
    width: 50px;
    margin: 50px auto;
}

.btn-switch {
    position: relative;
    display: block;
    width: 50px;
    height: 25px;
    cursor: pointer;
    background-color: #F27878;
    border: 2px solid #F27878;
    border-radius: 40px;
    
    .btn-switch-circle {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        height: 25px;
        width: 25px;
        background-color: #fff;
        border-radius: 40px;
    }
}

.btn-switch--on {
    background-color: #80CDBE;
    border: 2px solid #80CDBE;
    
    .btn-switch-circle--on {
        left: auto;
        right: 0;
    }
}
  </style>