AngularJS - Sortable

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<rp-switch name="my-first-model" ng-model="myModel" ng-disabled="dis"></rp-switch>
<br>
<rp-switch name="my-first-model" ng-model="dis"></rp-switch>
<hr>

<div ng-if="myModel">
	Oh, la data si está
</div>

<div ng-if="!myModel">
	La data no está :(
</div>

<input ng-model="myModel" my-attr="hello!" id="one">

SCSS

$rp-switch-height: 30px;
$rp-switch-width: 50px;
$rp-switch-border: 1px;

rp-switch
{
  display: inline-block;
  width: $rp-switch-width;
  height: $rp-switch-height;
  background: transparent;

  .rp-switch-wrap
  {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: transparent;
    position: relative;
    overflow: hidden;
    border-radius: $rp-switch-height / 2;
  }
  .rp-switch-background,
  .rp-switch-toggle
  {
    transition: 300ms;
    pointer-events: none;
  }

  .rp-switch-background
  {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #e4e4e4;
    box-sizing: border-box;
  }

  .rp-switch-toggle
  {
    display: block;
    height: #{$rp-switch-height - ($rp-switch-border * 2)};
    width: #{$rp-switch-height - ($rp-switch-border * 2)};
    position: absolute;
    background: white;
    border-radius: 50%;
    top: $rp-switch-border;
    left: $rp-switch-border;
    box-shadow: black 0px 0px 17px -5px;
  }

  input[type="checkbox"].rp-switch-input
  {
    display: none;

    &:checked
    {
      + .rp-switch-background
      {
        background: #06b38b;

        + .rp-switch-toggle
        {
          left: #{$rp-switch-width - $rp-switch-height + $rp-switch-border};
        }
      }
    }
  }


  &[disabled]
  {
    .rp-switch-wrap
    {
      cursor: not-allowed;
    }

    .rp-switch-toggle
    {
      opacity: .5;
      box-shadow: none;
    }
  }
}

JavaScript

const app = angular.module('MyApp', []);

app.directive('rpSwitch', rpSwitchDirective);

rpSwitchDirective.$inject = [];
function rpSwitchDirective() {
	function rpSwitchTemplate(tElement, tAttrs) {
		return (`
      <label class="rp-switch-wrap">
        <input type="checkbox" class="rp-switch-input">
        <span class="rp-switch-background"></span>
        <span class="rp-switch-toggle"></span>
      </label>
		`)
	}
	function postLink($scope, $element, $attrs, ngModel) {
		var input;
		if (ngModel) {
			input = $element[0].querySelector('.rp-switch-input');
			input.onchange = onChange;
			watchModel();
		}
		function onChange(e) {
    	if ($element[0].hasAttribute('disabled')) {
      	input.checked = !input.checked;
      	return;
      }
      ngModel.$setViewValue(input.checked);
		}
		function watchModel() {
			$scope.$watch($attrs.ngModel, function (newValue) {
				input.checked = !!newValue;
			});
		}
	}
	return {
		restrict: 'E',
		require: '?ngModel',
		template: rpSwitchTemplate,
		link: postLink
	}
}