I am attempting to incorporate HTML for a Bootstrap Switch radio button () from within an AngularJS controller using ngBind. When I run the following code, the Bootstrap Switch radio buttons that are already present in the HTML work as expected:
$('.bs-switch').bootstrapSwitch();
However, the radio button I dynamically insert into the HTML using ngBind remains a regular radio button. This leads me to believe that it may be a timing issue.
For example:
HTML:
<!-- this doesn't get converted to a Bootstrap Switch radio button -->
<div ng-bind-html="exampleHTML"></div>
<!-- this does get converted -->
<input type="checkbox" class="bs-switch" name="my-checkbox2" checked>
Controller:
$scope.exampleHTML = $sce.trustAsHtml(
'<input type="checkbox" class="bs-switch" ' +
' name="my-checkbox1" checked>'
);
$('.bs-switch').bootstrapSwitch();
When I try the following approach in the controller, the radio button inserted via ngBind is successfully converted to a Bootstrap Switch, indicating that it may indeed be a timing issue:
$scope.exampleHTML = $sce.trustAsHtml(
'<input type="checkbox" class="bs-switch" ' +
' name="my-checkbox1" checked>'
);
setTimeout(function() {
$('.bs-switch').bootstrapSwitch();
}, 1000);
Do you have any suggestions on how to achieve this without using a timeout? I am working on creating a dynamic form that is generated programmatically from a JSON config file, hence my use of ngBind to insert HTML.
UPDATE:
Here is a JSFiddle example