title: Embedding AngularJS in existing jquery/bootstrap based website
body: <p>We've got an existing application where the client-side is jQuery / Bootstrap.  It consists of many tabs where each tab is defined in a module imported via. require.js.  The tab javascript is handed a parent DOM element and is in charge of drawing itself inside of that element.</p>
  
  <p>We'd like to start building new functionality (tabs) in AngularJS and running into some problems doing that.</p>
  
  <p>My thinking is that we could tag the body with ng-app and in the main page code conjur up an app module <code>window.app = angular.module('ourApp', []);</code> and later, as tabs are loaded, create and wire-up the controllers.  </p>
  
  <p>I've built a simple single-page example that exhibits the problem we are having (below or here <a href="http://jsfiddle.net/p4v3G/1/" rel="nofollow">http://jsfiddle.net/p4v3G/1/</a>). </p>
  
  <p>The only way I've been able to get the example to work is manually calling <code>angular.bootstrap</code> which I'm pretty sure is wrong.  Also, that only works the first time so if I click the button twice (equivalent to navigating to the tab, away from it, and back again within our app), Angular isn't wired up properly.</p>
  
  <p>I'd appreciate any help.</p>
  
  <pre><code>&lt;body ng-app='testApp'&gt;
      &lt;div id="main" style="border: 1px solid #000; background: #ffdddd;"&gt;Click button to replace template and wire up controller...&lt;/div&gt;
      &lt;button id="button1"&gt;Load&lt;/button&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var app = angular.module('testApp', []);
          jQuery(function() {
              $("button").click(function() {
                  // controllers are wired up in click handler to simulate environment where we
                  // are looking to embed angular inside of an existing bootstrap/jquery application 
                  // where new tabs (loaded as separate modules through require) are loaded on-demand.
                  app.controller('TestController', function($scope) {
                      $scope.message = 'Hello World, from Controller #1';
                  });
  
                  $("#main").html('&lt;div ng-controller="TestController"&gt;{{message}}&lt;/div&gt;');
  
                  // Bootstrap works the first click but not subsequent clicks
                  angular.bootstrap(document, ['testApp']);
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>