AngularJS directive for the bootstrap-switch jQuery plugin.
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
common chore: add 'use strict' in a IIFE Apr 1, 2015
dist Release v0.5.2 Apr 19, 2017
example feat(bsSwitch): enable indeterminate state for switch Jun 13, 2015
src/directives Update model value when switch is disabled Dec 1, 2017
test Code reformatted 2 Dec 1, 2017
.bowerrc Structured project w/ Yeoman, Grunt, Bower Jul 30, 2013
.editorconfig Structured project w/ Yeoman, Grunt, Bower Jul 30, 2013
.gitattributes Structured project w/ Yeoman, Grunt, Bower Jul 30, 2013
.jshintrc Added a simple test, Grunt tasks are working fine Aug 1, 2013
.npmignore chore: add .npmignore for npm publish Nov 21, 2014
.travis.yml Specify GCC for Travis Jun 3, 2016 Release v0.5.2 Apr 19, 2017 docs: add CONTRIBUTING file Apr 1, 2015
Gruntfile.js chore(npm): update packages, replace ngMin with ngAnnotate Jan 29, 2016
LICENSE Initial commit Jul 30, 2013
bower.json Release v0.5.2 Apr 19, 2017
bsSwitch.prefix chore: add 'use strict' in a IIFE Apr 1, 2015
bsSwitch.suffix chore: add 'use strict' in a IIFE Apr 1, 2015
karma-chrome.conf.js Fix jquery import in tests Mar 20, 2017
karma.conf.js Fix jquery import in tests Mar 20, 2017
package.json Release v0.5.2 Apr 19, 2017


Bower version NPM version Build Status Apache License

AngularJS directive for the bootstrap-switch jQuery plugin.



$ bower install angular-bootstrap-switch


$ npm install angular-bootstrap-switch

This will install AngularJS, jQuery, and the original bootstrap-switch.


To be able to use the directive, you need to register the angular-bootstrap-switch module as a dependency:

angular.module('yourModule', ['frapontillo.bootstrap-switch'
    // other dependencies


The directive can work on both element and attribute levels. The following example contains all of the supported attributes:

    switch-active="{{ isActive }}"
    switch-readonly="{{ isReadonly }}"
    switch-size="{{ size }}"
    switch-animate="{{ animate }}"
    switch-label="{{ label }}"
    switch-icon="{{ icon }}"
    switch-on-text="{{ onLabel }}"
    switch-off-text="{{ offLabel }}"
    switch-on-color="{{ on }}"
    switch-off-color="{{ off }}"
    switch-radio-off="{{ radioOff }}"
    switch-label-width="{{ labelWidth }}"
    switch-handle-width="{{ handleWidth }}"
    switch-inverse="{{ inverse }}"

Short doc for all of the attributes:

  • ng-model, the value to bind the switch to
  • type, has to be one of checkbox and radio. This value is mandatory and must be a string, as it cannot be changed once set (see this answer on StackOverflow). If you choose radio, be sure to follow the AngularJS radio specs, meaning you have to specify the same ngModel and a different value or ng-value attribute for each radio
  • switch-active, determines if the switch is enabled or not (changes the inner input's disabled attribute)
  • switch-readonly, determines if the switch is read-only or not (changes the inner input's readonly attribute)
  • switch-size, can be the empty string as default, mini, small, large
  • switch-animate, determines if the switch animates when toggled
  • switch-on-text, sets the positive (checked) text
  • switch-off-text, sets the negative (unchecked) text
  • switch-on-color, sets the positive (checked) class, can be primary (as default), default, info, success, warning, danger
  • switch-off-color, sets the negative (unchecked) class, can be default (as default), primary, info, success, warning, danger
  • switch-label, sets the toggle label
  • switch-icon, sets the toggle icon (e.g. icon-save)
  • switch-wrapper, sets the main container class, use a falsy value to fall back to the default one
  • switch-radio-off, allows a radio button to be unchecked by the user (from true to false)
  • switch-label-width, sets the width of the middle label
  • switch-handle-width, sets the width of both handles
  • switch-inverse, inverts the on/off handles
  • switch-change, evaluates an expression whenever the model value changes. Instead, ng-change will fire when view value changes (e.g from a click)

Migrating from bootstrap-switch~2

Read the CHANGELOG information to learn what's different in 0.3.0.


The example folder shows a simple working demo of the switch.


IE8 requires you to attach the directive to an <input type="checkbox"> or <input type="radio">. Due to some incompatibilities it is not possible to use a custom tag or div instead.


Test and build

To build the directive yourself you need to have NodeJS. Then do the following:

$ npm install -g grunt-cli bower karma
$ npm install
$ bower install
$ grunt test-travis
$ grunt build


To contribute, please follow the generic AngularJS Contributing Guidelines, with the only exception to send the PR to the develop branch instead of master.


Francesco Pontillo (


   Copyright 2014-2017 Francesco Pontillo

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   See the License for the specific language governing permissions and
   limitations under the License.