ionic toggle with text. http://stackoverflow.com/questions/29280945/how-can-i-place-text-inside-an-ion-toggle

<!DOCTYPE html>
<html ng-app="ionToggleText">

<head>
  <link data-require="ionic@*" data-semver="1.0.0-beta6" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" />
  <script data-require="ionic@*" data-semver="1.0.0-beta6" src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body class="container">
  <h1>Ionic Toggle Text</h1>
  <p>
    Related <a href="http://stackoverflow.com/questions/29280945/how-can-i-place-text-inside-an-ion-toggle" target="_blank">stackoverflow</a> question.
    
  </p>
  
  <ion-toggle ion-toggle-text ng-model="simple">
    Simple Example: <b>{{ simple || false }}</b>
  </ion-toggle>
  
  <ion-toggle ion-toggle-text="online;offline" ng-model="customText">
    Custom text: <b>{{ customText || false }}</b>
  </ion-toggle>
  
  <ion-toggle ion-toggle-text ng-true-value="so true" ng-false-value="so false" ng-model="textByValue">
    Text by value: <b>{{ textByValue || 'so false' }}</b>
  </ion-toggle>
  
  
</body>

</html>

angular.module('ionToggleText', ['ionic'])
  .directive('ionToggleText', function () {

  var $ = angular.element;

  return {
    restrict: 'A',
    link: function ($scope, $element, $attrs) {
      
      // Try to figure out what text values we're going to use 
      
      var textOn = $attrs.ngTrueValue || 'on',
        textOff = $attrs.ngFalseValue || 'off';

      if ($attrs.ionToggleText) {
        var x = $attrs.ionToggleText.split(';');

        if (x.length === 2) {
          textOn = x[0] || textOn;
          textOff = x[1] || textOff;
        }
      }

      // Create the text elements
      
      var $handleTrue = $('<div class="handle-text handle-text-true">' + textOn + '</div>'),
        $handleFalse = $('<div class="handle-text handle-text-false">' + textOff + '</div>');

      var label = $element.find('label');

      if (label.length) {
        label.addClass('toggle-text');

        // Locate both the track and handle elements
        
        var $divs = label.find('div'),
          $track, $handle;

        angular.forEach($divs, function (div) {
          var $div = $(div);

          if ($div.hasClass('handle')) {
            $handle = $div;
          } else if ($div.hasClass('track')) {
            $track = $div;
          }
        });

        if ($handle && $track) {
          
          // Append the text elements
          
          $handle.append($handleTrue);
          $handle.append($handleFalse);

          // Grab the width of the elements
          
          var wTrue = $handleTrue[0].offsetWidth,
            wFalse = $handleFalse[0].offsetWidth;

          // Adjust the offset of the left element
          
          $handleTrue.css('left', '-' + (wTrue + 10) + 'px');

          // Ensure that the track element fits the largest text
          
          var wTrack = Math.max(wTrue, wFalse);
          $track.css('width', (wTrack + 60) + 'px');
        }
      }
    }
  };

});

/* Styles go here */


.toggle-text > .track {

  width: auto;
  padding-left: 25px;
  padding-right: 25px;

}

.toggle-text .handle {
  left: 7px;
}

.toggle-text .handle-text {
  font-size: 24px;
  color: white;

  position: absolute;
  top: -4px;
  
}

.toggle-text .handle-text-false {
  left: 36px;
}

.toggle-text input:checked + .track .handle {
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
  left: calc(100% - 34px);
  
/*  -webkit-transform: translate3d(0, 0,0);*/
}
.track-text {
  line-height: 26px;
  color: white;
  font-size: 24px;
  padding-left: 10px;
  padding-right: 10px;
}