toggle switch angularjs

1<div class="container" ng-app="app" ng-controller="mainController">
2    
3    <div class="btn-switch" ng-class="{'btn-switch--on':toggle.switch}" ng-model="toggle.switch" ng-click="toggle.switch = !toggle.switch">
4        
5        <div class="btn-switch-circle" ng-class="{'btn-switch-circle--on':toggle.switch}" ng-model="toggle.switch" ng-click="!toggle.switch = toggle.switch"></div>
6        
7    </div>
8</div>
9<script>
10  var app = angular.module('app', ['ui.bootstrap'])
11  app.controller('mainController', function($scope) {
12
13  $scope.toggle = {};
14  $scope.toggle.switch = false;
15
16});
17</script>
18<style>
19  .container {
20    width: 50px;
21    margin: 50px auto;
22}
23
24.btn-switch {
25    position: relative;
26    display: block;
27    width: 50px;
28    height: 25px;
29    cursor: pointer;
30    background-color: #F27878;
31    border: 2px solid #F27878;
32    border-radius: 40px;
33    
34    .btn-switch-circle {
35        position: absolute;
36        top: 0;
37        left: 0;
38        display: block;
39        height: 25px;
40        width: 25px;
41        background-color: #fff;
42        border-radius: 40px;
43    }
44}
45
46.btn-switch--on {
47    background-color: #80CDBE;
48    border: 2px solid #80CDBE;
49    
50    .btn-switch-circle--on {
51        left: auto;
52        right: 0;
53    }
54}
55  </style>
56