toggle directive (slide)

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
<div ng-controller="MyCtrl" class="ie">

<p>Hello, {{name}}!</p>
    
<input type="checkbox" ng-model="demoToggle">

<label class="toggle">
    <input class="toggle-input cc-toggle" type="checkbox" ng-model="demoToggle">
    <span class="toggle-chrome" aria-hidden="true">
      <span class="toggle-slide">
          <span class="toggle-option">On</span>
          <span class="toggle-option">Off</span>
          <span class="toggle-switch"></span>
      </span>
    </span>
</label>
<h1>{{selected}}</h1>
<br />
<p>
hello
</p>
<div>
  Send <switch ng-model="selected" switcher-on-text="Send" switcher-off-text="N/A"></switch> Send
</div>
<p>
hello
</p>

</div> <!-- /MyCtrl -->

CSS

@toggle-width: 63px;
@toggle-height: 16px;
@toggle-border-width: 1px;
@toggle-switch-width: 32px;
@toggle-font-size: 11px;
@toggle-active-color: #cee5ef;
.toggle {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  line-height: 0;
  cursor: pointer;
  
  &:active {
    .toggle-switch {
      background-color: #e9e9e9;
      background-image: linear-gradient(to bottom, #fafafa, #e0e0e0);
    }
  }
}
.toggle-input {
  .accessible-hidden-input();

  &:focus {
    outline: none;
  }
  &:focus + .toggle-chrome {
    .tab-focus();
  }
  &:checked + .toggle-chrome {
    .toggle-chrome-active();
  }
}
.toggle-chrome {
  display: inline-block;
  position: relative;
  border: #b8b8b8 solid @toggle-border-width;
  border-radius: 2px;
  vertical-align: middle;
  background-color: #dfdfdf;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.2),transparent);
  width: @toggle-width;
  height: @toggle-height;
  font-size: 0;
  transition: background-color .1s, border-color .15s;
  overflow: hidden;
  white-space: nowrap;
}
.toggle-chrome-active() {
  background-color: @toggle-active-color;
  .toggle-slide {
    transform: translate3d((@toggle-width - @toggle-switch-width),0,0);
  }
}
.toggle-slide {
  display: inline-block;
  transform: translate3d(0,0,0);
  transition: transform .1s;
}
.toggle-switch {
  position: absolute;
  border: #b8b8b8 solid 1px;
  background-color: #f0f0f0;
  background-image: linear-gradient(to bottom, #fafafa, #f0f0f0);
  border-radius: 2px;
  width: @toggle-switch-width;
  height: @toggle-height;
  top: (-1 * @toggle-border-width);
  left: (-1 * @toggle-border-width);
}
.toggle-option {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  font-size: @toggle-font-size;
  font-weight: @fw-semi-bold;
  color: #333;
  line-height: 1;
  padding-top: floor((@toggle-height - @toggle-font-size) / 2) - @toggle-border-width;
  padding-right: @toggle-border-width;
  width: (@toggle-width...

JavaScript

var myApp = angular.module('myApp',[]);

/*
myApp.directive('toggle', function($compile) {
    return {
        restrict: 'C',
        link: function(scope, element) {
            
            scope.$watch('demoToggle', function(newValue,oldValue){
                element.toggleClass('checked', newValue);
            });
            
            element.find('.toggle-input')
                .on('focus', function() {
                    element.addClass('focus');
                })
                .on('blur', function() {
                    element.removeClass('focus');
                });
        }
    }
});
*/
myApp.directive('ccToggle', function() {
    return {
        restrict: 'C',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            scope.$watch(function () {
                return ctrl.$modelValue;
            }, function(newValue,oldValue) {
                $(element).closest('.toggle').toggleClass('checked', newValue);
            });
            
            element
                .on('focus', function() {
                    $(element).closest('.toggle').addClass('focus');
                })
                .on('blur', function() {
                    $(element).closest('.toggle').removeClass('focus');
                });
        }
    }
});

myApp.directive('switch', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class="switch switch-off"><div class="switch-background"><div class="switch-on-off"></div><div class="switch-text"></div></div></div>',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {

            if (!ngModel) {
                return;
            }

            var switcherOnClass = 'switch-on';
            var switcherOffClass = 'switch-off';
            var $element = $(element);

            var $switcherText = $($element.find('.switch-text'));

            var switcherOnText = attrs.switcherOnText ?...