title: Angularjs: cannot get bootstrap data-toggle working if dynamically appended to page
body: <p>this is my first post, so be patient!
  I managed (hope) to attach a working code snippet as simple as possible.</p>
  
  <p>As I told in the subject I canoot get data-toggle bootstrap checkboxes be rendered if added to page via angular. Running the snippet you can see a static checkbox (bootstrap rendered) and a button to add more checkboxes 
  (not rendered)</p>
  
  <p>Any hep appreciated
  BTW I'm really new to angular too</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var bootstrapTest = angular.module('boostrapTest', []);
  
  bootstrapTest.service('loadDataService', function() {
      return {
               LoadToggle: function() {
                  return '&lt;label class="checkbox-inline"&gt; &lt;input type="checkbox" checked data-toggle="toggle"&gt;&lt;/label&gt;'
               }
      }
  });
  /**
   * Controllers
   */
  
  bootstrapTest.controller('bootstrapTestController', function($scope, $compile, loadDataService) {
  
      $scope.doLoadToggle = function (){
          var myToggle = loadDataService.LoadToggle ();
          var outputMainScope = angular.element(document.getElementById('output_main'));
          // var temp = $compile(myToggle)($scope);
          outputMainScope.append(myToggle)
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;dynamyc apply bootstrap testing&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="testBootstrap.js"&gt;&lt;/script&gt;
      &lt;!-- (load bootstrap) CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
      &lt;link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"&gt;
      &lt;!-- (load bootstrap) js --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;
      &lt;!-- (end load bootstrap) --&gt;
  &lt;/head&gt;
  &lt;body ng-app="boostrapTest"&gt;
  &lt;div id="body" ng-controller="bootstrapTestController"&gt;
    &lt;div id="header"&gt;
          &lt;label class="checkbox-inline"&gt;
              &lt;input type="checkbox" checked data-toggle="toggle"&gt; static
          &lt;/label&gt;
          &lt;input type="button" ng-click="doLoadToggle()" value="CaricaToggle" &gt;
    &lt;/div&gt;
    &lt;div id="output_main"&gt;
          &lt;p &gt;pippo&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>