ionic toggle with text. Updated for ionic 1.3.0 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.3.0" rel="stylesheet" href="//code.ionicframework.com/1.3.0/css/ionic.css" />
  <script data-require="ionic@*" data-semver="1.3.0" src="//code.ionicframework.com/1.3.0/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" toggle-class="toggle-my-theme">
    Simple Example: <b>{{ simple || false }}</b>
  </ion-toggle>

  <ion-toggle ion-toggle-text ng-model="simple" toggle-class="toggle-my-theme" ng-disabled="true">
    Disabled Example: <b>{{ simple || false }}</b>
  </ion-toggle>

  <ion-toggle ion-toggle-text="online;offline"  ng-model="customText" toggle-class="toggle-my-theme">
    Custom text: <b>{{ customText || false }}</b>
  </ion-toggle>
  <ion-toggle ng-model="customText" toggle-class="toggle-calm">Airplane Mode</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');
        }
      }
    }
  };

});

/* Custom style colors for toggle */
.toggle.toggle-my-theme input:checked + .track {
    border-color: #0081C6;
    background-color: #0081C6;
}


.toggle-text > .track {
 
  width: auto;
  padding-left: 25px;
  padding-right: 25px;
  border: 0;
  height: 30px;
  background: #9e9e9e; 
}
 
.toggle-text .handle {
  left: 6px;
}
 
.toggle-text .handle-text {
  font-size: 24px;
  color: white;
  position: absolute;
  top: -5px;
  
}
 
.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);  
}
.track-text {
  line-height: 26px;
  color: white;
  font-size: 18px;
  padding-left: 10px;
  padding-right: 10px;
}