angularjs - Bootstrap Switch stops working with Angular Routing -

i have started learning angular , have set angular routing first app.

i have shell page , sub pages, example products.html, help.html etc

the sub pages contains forms bootstrap switches , validation, reason stops working (the switch rendered regular checkbox , validation not run - please note not using angular js).

however, if place same code directly in shell page works fine.

how sub pages behave code in shell page?

basically, if have following code in form in 1 of subpages help.html:

        <div class="form-group">             <label for="active">my checkbox<br />             <div class="switch">                 <input type="checkbox" value="1" id="active" name="active">             </div>         </div> 

...the switch not render correctly, if move code directly shell page renders correctly.

so difference in happens in sub page (which shown in on shell page) or somw code placed directly in shell page html.

i assuming using this bootstrap switch plugin.

i assuming initialising switches work on shell page doing like:

$(function () {     $('input[type="checkbox"]').bootstrapswitch(); }); 

the problem apply bootstrap switch plugin checkboxes finds on first page load, not after change pages within ng-view element.

what recommend instead create simple angularjs directive apply bootstrap switch plugin checkboxes. reason work angular compile contents of view every time change pages , link() functions of directives found run. thus, checkboxes, if use new directive, have plugin applied correctly.

the directive simple as:

app.directive('bsswitch', function() {   return {     restrict: 'a',     require: 'ngmodel',     link: function(scope, element, attrs, ngmodelctrl) {       $(element).bootstrapswitch({         onswitchchange: function(event, state) {           scope.$apply(function() {             ngmodelctrl.$setviewvalue(state);           });         }       });     }   } }); 

then change markup in views be:

<div class="form-group">     <label for="active">my checkbox</label>     <br />     <div class="switch">         <input type="checkbox" value="1" id="active" name="active" bs-switch>     </div> </div> 

edit: if wish apply bootstrap switch all checkboxes on application without need additional attributes, instead create directive apply <input>s, , check if checkboxes.

like so:

app.directive('input', function() {     return {       restrict: 'e',       require: 'ngmodel',       link: function(scope, element, attrs, ngmodelctrl) {         if (attrs.type === 'checkbox')           $(element).bootstrapswitch({             onswitchchange: function(event, state) {               scope.$apply(function() {                 ngmodelctrl.$setviewvalue(state);               });             }           });       }     } }); 

and can omit bs-switch attribute in markup.

see working plunkr example (plunkr better tool jsfiddle angular examples, , allows create multiple html, css , js files).

edit 2: mark pointed out, broken if checkbox checked. here fixed version of directive (and updated plunkr):

// element directive apply checkbox inputs: // <input type="checkbox" ng-model="blah"> app.directive('input', function() {   return {     restrict: 'e',     require: 'ngmodel',     link: function(scope, element, attrs, ngmodelctrl) {       if (attrs.type === 'checkbox' && !object.hasownproperty(attrs, 'bsswitch')) {         $(element).bootstrapswitch({           onswitchchange: function(event, state) {             scope.$apply(function() {               ngmodelctrl.$setviewvalue(state);             });           }         });          var dereg = scope.$watch(function() {           return ngmodelctrl.$modelvalue;         }, function(newval) {           $(element).bootstrapswitch('state', !! newval, true);           dereg();         });       }     }   } });