var app = angular
.module('plunker', ['pascalprecht.translate', 'ui.toggle'])
.config(function($translateProvider) {
$translateProvider.translations('en', {
TEST: 'Test'
});
$translateProvider.useUrlLoader('test.json');
$translateProvider.preferredLanguage('en');
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="angular-bootstrap-toggle.min.css" />
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.7/angular.js" data-semver="1.4.7"></script>
<script data-require="angular-translate@*" data-semver="2.6.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.6.0/angular-translate.js"></script>
<script data-require="angular-translate-loader-partial@*" data-semver="2.0.1" src="https://rawgit.com/PascalPrecht/bower-angular-translate-loader-partial/master/angular-translate-loader-partial.js"></script>
<script data-require="angular-ui-bootstrap@*" data-semver="0.14.3" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="angular-bootstrap-toggle.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>Long Name: {{'LONG_NAME' | translate}}</div>
<toggle ng-model="toggleValue" ng-change="changed()" on="{{'LONG_NAME' | translate}}" off="{{'LONG_NAME' | translate}}" onstyle="btn-success" offstyle="btn-danger"></toggle>
<div>Test: {{'TEST' | translate}}</div>
<toggle ng-model="toggleValue" ng-change="changed()" on="{{'TEST' | translate}}" off="{{'TEST' | translate}}" onstyle="btn-success" offstyle="btn-danger"></toggle>
</body>
</html>
!function(){"use strict";angular.module("ui.toggle",[]).value("$toggleSuppressError",!1).constant("toggleConfig",{on:"On",off:"Off",size:"",onstyle:"btn-primary",offstyle:"btn-default",style:""}).controller("ToggleController",["$scope","$attrs","$interpolate","$log","toggleConfig","$toggleSuppressError",function(e,t,n,l,s){var o=this,a={$setViewValue:angular.noop};angular.forEach(["on","off","size","onstyle","offstyle","style"],function(l,a){o[l]=angular.isDefined(t[l])?6>a?n(t[l])(e.$parent):e.$parent.$eval(t[l]):s[l]}),this.init=function(n){a=n,a.$render=function(){o.render()},a.$viewChangeListeners.push(function(){e.$eval(t.ngChange)});var l=o.element.find("label");angular.element(l[0]).html(o.on),angular.element(l[1]).html(o.off);var s=o.element.find("span"),i=o.width||Math.max(l[0].offsetWidth,l[1].offsetWidth)+s[0].offsetWidth/2,r=o.height||Math.max(l[0].offsetHeight,l[1].offsetHeight),f=o.element.find("div"),g=f[0].offsetWidth,c=f[1].offsetHeight;e.wrapperStyle={},i>g&&(e.wrapperStyle.width=i+"px"),r>c&&"btn-xs"!=o.size&&"btn-sm"!=o.size&&(e.wrapperStyle.height=r+"px"),e.onClass=[o.onstyle,o.size,"toggle-on"],e.offClass=[o.offstyle,o.size,"toggle-off"],e.handleClass=[o.size,"toggle-handle"]},this.render=function(){this.isOn=angular.isDefined(a.$viewValue)?a.$viewValue:!1,e.wrapperClass=this.isOn?[o.onstyle,o.size,o.style]:[o.offstyle,"off ",o.size,o.style]},e.onSwitch=function(){a.$setViewValue(!a.$viewValue),a.$render()},angular.forEach(["ngModel"],function(n){var l=e.$parent.$watch(t[n],function(){a.$render()});e.$parent.$on("$destroy",function(){l()})})}]).directive("toggle",function(){return{restrict:"E",transclude:!0,template:'<div class="toggle btn" ng-class="wrapperClass" ng-style="::wrapperStyle" ng-click="onSwitch()"><div class="toggle-group"><label class="btn" ng-class="::onClass"></label><label class="btn active" ng-class="::offClass"></label><span class="btn btn-default" ng-class="::handleClass"></span></div></div>',scope:{bindModel:"=ngModel"},require:["toggle","ngModel"],controller:"ToggleController",controllerAs:"toggle",link:function(e,t,n,l){var s=l[0],o=l[1];s.element=t,s.init(o)}}})}();
.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}.toggle{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;position:relative;overflow:hidden}.toggle-group,.toggle-off,.toggle-on{position:absolute;top:0;bottom:0}.toggle-group{width:200%;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}.toggle.off .toggle-group{left:-100%}.toggle-on{left:0;right:50%;margin:0;border:0;border-radius:0}.toggle-off{left:50%;right:0;margin:0;border:0;border-radius:0}.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}.toggle.btn{min-width:59px;min-height:34px}.toggle-on.btn{padding-right:24px}.toggle-off.btn{padding-left:24px}.toggle.btn-lg{min-width:79px;min-height:45px}.toggle-on.btn-lg{padding-right:31px}.toggle-off.btn-lg{padding-left:31px}.toggle-handle.btn-lg{width:40px}.toggle.btn-sm{min-width:50px;min-height:30px}.toggle-on.btn-sm{padding-right:20px}.toggle-off.btn-sm{padding-left:20px}.toggle.btn-xs{min-width:35px;min-height:22px}.toggle-on.btn-xs{padding-right:12px}.toggle-off.btn-xs{padding-left:12px}
{
"LONG_NAME": "Long Name"
}