AngularJS Accordion, multilevel, build dynamically, JSON, ng-bind-html

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular.min.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
<body>
<div  ng-controller="AccordionDemoCtrl" id="akkordion"></div>

<!--comment-->
<script type="text/javascript">
 <!-- document.all.akkordion.innerHTML="<accordion close-others=\"true\"><accordion-group heading=\"Test1\">Testinhalt1</accordion-group></accordion>";-->
  var json = '[{"name":"Menue1","isOpen":"false","groups":[{"name":"Menue11","isOpen":"false","groups":""}]},{"name":"Menue2","isOpen":"false","groups":""},{"name":"Menue3","isOpen":"false","groups":""}]';
  var ary = JSON.parse(json);
  var accView = "";
  var accLevel = 0;
  var accName = "groups";
  
  var accBuild = function (obj){
    if (typeof(obj)==="object"){
      for (var i in obj) {
        
        accView = accView + "<accordion close-others=\"true\">";
        accView = accView + "<accordion-group ng-repeat=\""+(accName+accLevel);
        if(accLevel>0){
        accView = accView + " in "+accName+".groups\" is-open=\"{{"+(accName+accLevel)+".isOpen}}\"><accordion-heading><div ng-click=\"opened("+(accName+accLevel)+".name)\">{{"+(accName+accLevel)+".name}}</div></accordion-heading>";
        }else{
        accView = accView + " in "+accName+"\" is-open=\"{{"+(accName+accLevel)+".isOpen}}\"><accordion-heading><div ng-click=\"opened("+(accName+accLevel)+".name)\">{{"+(accName+accLevel)+".name}}</div></accordion-heading>";  
        }
        
        accName = accName+accLevel;
        accLevel = accLevel + 1;
        accBuild(obj[i].groups);
        accView = accView + "</accordion-group></accordion>";
      }
    }
  }
  
  accBuild(ary);
  alert(accView);
  document.all.akkordion.innerHTML=accView;
  
</script>
  

</body>
</html> 
<!--
finally: we build up Angularjs accordion tags before compile.
This happens with pure javascript. Pure js runs before angular starts.
So, all I have to do is to write a js function that creates a chunck
of ng-Html.
This js function has to be recursive. Because we don't know how deep the
multi level accordion would be.

How to force Angular do a "reinit" to rescan all the DOM if a portion 
of page has been dynamically added?
https://github.com/angular/angular.js/issues/6184
AngularJS - Compiling dynamic HTML strings from database
http://stackoverflow.com/questions/18157305/angularjs-compiling-dynamic-html-strings-from-database
Plunker Demo for $compile
http://plnkr.co/edit/F91xvGHBASvqCGBJcEYY?p=preview
ng-include loads and compile views
http://docs.angularjs.org/api/ng/directive/ngInclude
Tips ng
http://www.benlesh.com/search/label/AngularJS
Insert and parse HTML into view using AngularJS
http://stackoverflow.com/questions/18690804/insert-and-parse-html-into-view-using-angularjs
-->

angular.module('plunker', ['ui.bootstrap']);

function AccordionDemoCtrl($scope) {
$scope.opened = function (groupname) {
    console.log("Opened group: "+ groupname);
  };
 $scope.groups = ary;
}