Angularjs: cannot get bootstrap data-toggle working if dynamically appended to page
<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>