how to add text on off inside the toggle switch with angular js

Question

on off toggle switch is working with the ng-model data. but how to show the on off status inside the toggle switch

html

  {{pump1status_switch}}
 <label class="switch">
 <input type="checkbox" ng-model="pump1status.value1">
 <span class="slider round"></span>
 </label>

angular js code

  if ($scope.pump1status.trim() === "1") {
                $scope.pump1status = "1";
                $scope.pump1status_switch = "on";
                $scope.pump1status = {
                    value1: true,
                    value2: 'YES'
                };
            }
            else {
                $scope.pump1status_switch = "off";
                $scope.pump1status = "0";
                $scope.pump1status = {
                    value1: false,
                    value2: 'NO'
                };
            }

Answer 1

Add another span element for the text and use ng-class to give it an extra class if switch is off:

<label class="switch">
   <input type="checkbox" ng-model="vm.isActive">
   <span class="slider round" >
       <span ng-class="{ 'off': !vm.isActive }">{{vm.isActive ? 'on' : 'off'}}</span>
   </span>
 </label>

Then you will need some css to move the off text:

.slider.round {
  border-radius: 34px;
  padding: 7px;
}

.off {
   margin-left:26px;
}

Check here a working demo: DEMO