Bootstrap buttons-checkbox with Angular

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<div ng-app="sample" ng-controller="SampleController">
  <ul>
    <li>myModel.optionA:{{myModel.optionA}}</li>
    <li>myModel.optionB: {{myModel.optionB}}</li>
  </ul>
  <form class="form-inline">
    <label class="checkbox">
      <input type="checkbox" ng-model="myModel.optionA"> A
    </label>
    <label class="checkbox">
      <input type="checkbox" ng-model="myModel.optionB"> B
    </label>
  </form>
  <div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" ng-model="myModel.optionA" class="btn">A</button>
    <button type="button" ng-model="myModel.optionB" class="btn">B</button>
    <div class="onoffswitch">
      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked ng-model="myModel.optionB">
      <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
      </label>
    </div>
    <div class="onoffswitch">
      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked ng-model="myModel.optionA">
      <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
      </label>
    </div>
  </div>
</div>

CSS

.onoffswitch {
       position: relative;
       width: 92px;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
     }
     
     .onoffswitch-checkbox {
       display: none;
     }
     
     .onoffswitch-label {
       display: block;
       overflow: hidden;
       cursor: pointer;
       border: 2px solid #999999;
       border-radius: 20px;
     }
     
     .onoffswitch-inner {
       display: block;
       width: 200%;
       margin-left: -100%;
       transition: margin 0.3s ease-in 0s;
     }
     
     .onoffswitch-inner:before,
     .onoffswitch-inner:after {
       display: block;
       float: left;
       width: 50%;
       height: 30px;
       padding: 0;
       line-height: 30px;
       font-size: 12px;
       color: white;
       font-family: Trebuchet, Arial, sans-serif;
       font-weight: bold;
       box-sizing: border-box;
     }
     
     .onoffswitch-inner:before {
       content: "Local";
       padding-left: 10px;
       background-color: #34A7C1;
       color: #FFFFFF;
     }
     
     .onoffswitch-inner:after {
       content: "Remote";
       padding-right: 10px;
       background-color: #EEEEEE;
       color: #999999;
       text-align: right;
     }
     
     .onoffswitch-switch {
       display: block;
       width: 22px;
       margin: 4px;
       background: #FFFFFF;
       position: absolute;
       top: 0;
       bottom: 0;
       right: 58px;
       border: 2px solid #999999;
       border-radius: 20px;
       transition: all 0.3s ease-in 0s;
     }
     
     .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
       margin-left: 0;
     }
     
     .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
       right: 0px;
     }

JavaScript

// Bootstrap module
// here you should keep adding more directives leading to a
// better Bootstrap-AngularJS integration :)
angular.module('bootstrap', []).directive('button', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function($scope, element, attr, ctrl) {

      // ignore other kind of button groups (e.g. buttons-radio)
      if (!element.parent('[data-toggle="buttons-checkbox"].btn-group').length) {
        return;
      }

      // set/unset 'active' class when model changes
      $scope.$watch(attr.ngModel, function(newValue, oldValue) {
        element.toggleClass('active', ctrl.$viewValue);
      });

      // update model when button is clicked
      element.bind('click', function(e) {
        $scope.$apply(function(scope) {
          ctrl.$setViewValue(!ctrl.$viewValue);
        });

        // don't let Bootstrap.js catch this event,
        // as we are overriding its data-toggle behavior.
        e.stopPropagation();
      });
    }
  };
});

angular.module('sample', ['bootstrap']);

function SampleController($scope) {
  console.log('model');
  $scope.myModel = {
  };
}