Bootstrap-toggle AngularJS directive

toggle-checkbox.js

'use strict';

/**
 * Bootstrap-toggle Directive
 * @link https://github.com/minhur/bootstrap-toggle
 */
angular.module('toggleCheckbox', [])
    .directive('toggleCheckbox', function() {

        /**
         * Directive
         */
        return {
            restrict: 'A',
            transclude: true,
            replace: false,
            require: 'ngModel',
            link: function ($scope, $element, $attr, require) {

                var ngModel = require;

                // update model from Element
                var updateModelFromElement = function() {
                    // If modified
                    var checked = $element.prop('checked');
                    if (checked != ngModel.$viewValue) {
                        // Update ngModel
                        ngModel.$setViewValue(checked);
                        $scope.$apply();
                    }
                };

                // Update input from Model
                var updateElementFromModel = function() {
                    // Update button state to match model
                    $element.trigger('change');
                };

                // Observe: Element changes affect Model
                $element.on('change', function() {
                    updateModelFromElement();
                });

                // Observe: ngModel for changes
                $scope.$watch(function() {
                    return ngModel.$viewValue;
                }, function() {
                    updateElementFromModel();
                });

                // Initialise BootstrapToggle
                $element.bootstrapToggle();
            }
        };
    });

Thanks for putting this together.

Had a question...can you extend your directive to enable binding the input checked=true/false values to specific $scope model string values (e.g. "on" and "off")?

Figured it out...Add

ng-true-value="'on'" ng-false-value="'off'"

note the single quotes within the double quotes.

Thanks for this! Check https://gist.github.com/jjmontesl/54457bf1342edeb218b7 for a version with support for ngDisabled.

Is there an easy way to support a function callback? In several use cases I need to have the control call a function to do some logic and then switch the state.

For me Some times working and some times not working. I included both .css and .js file bootstrap-toggle. Change Event calling two times. so value reset to same value.Can't find why it's calling two times. Please guide me..

How would I be able to apply this directive on checkbox within a ui-grid?
I have tried the following but checkbox states are not changed:

{ name: 'isDeleted', displayName: 'To be Deleted', enableCellEdit: false, type: 'boolean', cellTemplate: '' },

Thanks Dave. Here's the version with ngDisabled that jjmontesl created but not available on gist anymore: https://gist.github.com/grenoult/20ddc6c23d6f06580fce9803521f1ea6