title: Nested modules in AngularJS
body: <p>I Have 2 differents AngularJs modules : a widgetContainer and a widget.</p>
  
  <p>A widget can be displayed as an independant application or be included into a widgetContainer. A widgetContainer contains 0-N widgets.</p>
  
  <p>If i try to boostrap the widget module into the widgetContainer, angular throw the following error : </p>
  
  <blockquote>
    <p>Error: [ng:btstrpd] App already bootstrapped with this element '&lt;div id="childApp"&gt;'
    <a href="http://errors.angularjs.org/1.5.8/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22childApp%22%26gt%3B" rel="nofollow">http://errors.angularjs.org/1.5.8/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22childApp%22%26gt%3B</a></p>
  </blockquote>
  
  <p>I have reproduce this error in <a href="http://plnkr.co/edit/PBIyADrP0VpbDBBfen1b?p=preview" rel="nofollow">this plunk</a></p>
  
  <pre><code>&lt;div id="parentApp"&gt;
  &lt;div ng-controller="MainParentCtrl"&gt;
    Hello {{name}} !
    &lt;div id="childApp"&gt;
      &lt;div ng-controller="MainChildCtrl"&gt;
        Hello {{childName}} !
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>EDIT : </p>
  
  <p>Using Dependency injection solve the problem efficiently.</p>
  
  <p>Now, I need to load the widget from a directive.</p>
  
  <pre><code>parentApp.directive('widget', [function() {
    return {
      restrict: 'E',
      link: function($scope, $element, $attr) {
  
        var div = document.createElement('div');
        div.setAttribute("ng-controller", "MainChildCtrl");
        div.innerHTML = 'Hello {{childName}} !';
        $element.append(angular.element(div));
  
      }
    };
  }]);
  </code></pre>
  
  <p>The div is created but the childApp module is not loaded inside.
  I have updated my <a href="http://plnkr.co/edit/PBIyADrP0VpbDBBfen1b?p=preview" rel="nofollow">plunker</a></p>