Small directive to create an AngularJS switch button with Twitter Bootstrap + jQuery

directive.js

myApp.directive('switchButton', function() {
    return {
        require: 'ngModel',
        restrict: 'E',
        template: '<div class="btn-group">' +
            '<button class="btn on" ng-click="on()"></button>' +
            '<button class="btn off" ng-click="off()"></button>' +
            '</div>',
        link: function($scope, element, attrs, controller) {
            $scope.on = function() {
                $(element).find(".btn.on").addClass("btn-primary");
                $(element).find(".btn.off").removeClass("btn-primary");
                controller.$setViewValue(true);
            }
            $scope.off = function() {
                $(element).find(".btn.off").addClass("btn-primary");
                $(element).find(".btn.on").removeClass("btn-primary");
                controller.$setViewValue(false);
            }
            controller.$render = function() {
                $scope[controller.$viewValue ? "on" : "off"]();
            };
        }
    }
});

example.html

<switch-button ng-model="light"></switch-button>
Light : <span ng-bind="light"></span>

switch.css

switch-button button {
  height: 18px;
}