bootstrap switch and ng-model

Question

I use angular and the bootstrap-switch plugin in my application. It works like this:

<input type="checkbox" name="my-checkbox" checked>
<script>$("[name='my-checkbox']").bootstrapSwitch("size", "small");</script>

The problem is that if I want to use all the attributes I found there it doesn't work.

How can I use ng-model with my switch? I would like to use it like this:

<input type="checkbox" name="my-checkbox" checked="variableStatus" data-on-color="success" data-off-color="warning">
or
<input type="checkbox" name="my-checkbox" ng-model="variableStatus" data-on-color="success" data-off-color="warning">

Solution 1

The most obvious reason that it's not working is that bootstrap-switch is a jQuery library. Angular doesn't play well with jQuery, so if you want to use it, you'll have to write your own directive. However, the following link will give you a directive someone wrote called angular-bootstrap-switch. You might want to check it out.

https://github.com/frapontillo/angular-bootstrap-switch

Solution 2

Bootstrap has special method for starting, if you want start it, try it start after period time in angularjs.

setTimeout(installSwitcher, 1000);

function installSwitcher(){
   $("[name='my-checkbox']").bootstrapSwitch();
}

<input type="checkbox" name="my-checkbox" checked>