Angular Switcher

<switcher ng-model="basic"></switcher>

<switcher ng-model="labels"
          true-label="Ja"
          false-label="Nein">
</switcher>

<switcher ng-model="values"
          true-value="'€'"
          true-label="EUR"
          false-value="'$'"
          false-label="USD">
</switcher>

isDisabled

<switcher class="styled"
          ng-model="style"
          ng-disabled="isDisabled"
          ng-change="onChange(newValue, oldValue)"
          true-label="<img src='img/lock-open.png'>"
          false-label="<img src='img/lock-close.png'>">
</switcher>

<input type="checkbox" ng-model="isDisabled"> isDisabled

/* bar height */
.styled .switcher-line:before { height: 20px; }
/* bar backgrounds */
.styled         .switcher-line:before { background: #e35144; }
.styled .active .switcher-line:before { background: #4ecb32; }
/* icons opacity */
.styled         .switcher-label.false,
.styled .active .switcher-label.true { opacity: 1; }
.styled         .switcher-label.true,
.styled .active .switcher-label.false { opacity: .4; }

// open browser console to see this in action
$scope.onChange = function (newValue, oldValue) {
    $log.log('Switch:', newValue, oldValue);
};