title: Calling AngularJS function from a remote page loaded by Bootstrap modal
body: <p>I use Bootstrap 3 modal component to load a remote form, in which I define an Angular controller and several functions. But the browser said "Tried to Load Angular More Than Once".</p>
  
  <h3>Main page:</h3>
  
  <pre><code>(omitted: ng-app="manageAppCollections", ng-controller="manageAppController")
  
  &lt;button type="button" class="btn btn-success" ng-href="./appConfForm" data-toggle="modal" data-target="#saveModal"&gt;Add an App&lt;/button&gt;
  
  &lt;div id="saveModal" class="modal inmodal fade" aria-hidden="true" role="dialog" tabindex="-1" refresh-modal&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>Form page(./appConfForm):</h3>
  
  <pre><code>&lt;div ng-app="saveForm" ng-controller="saveFormController"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button class="close" data-dismiss="modal" type="button"&gt;
              &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
              &lt;span class="sr-only"&gt;Close&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;form class="form-horizontal" name="eventEditForm"&gt;
              (omitted form content)
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-default" data-dismiss="modal" type="button"&gt;Cancel&lt;/button&gt;
          &lt;button class="btn btn-primary" type="button" ng-click='addApp()'&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      angular.module('saveForm',[]).controller('saveFormController', ['$scope, $http', function($scope, $http) {
          $scope.addApp = function(){
              console.log("Added!");
          }
      }])
  &lt;/script&gt;
  </code></pre>
  
  <p>The <code>addType()</code> function cannot be triggered.</p>
  
  <p>Do I need to compile the remote content? And how can I do that?</p>
  
  <h2>Edit</h2>
  
  <p>Previously I loaded AngularJS files in both pages, which was not necessary. Now I remove those files in the form page, but the content in the page won't work. I assume it needs compiling after loaded, so now:</p>
  
  <h3>Main page:</h3>
  
  <pre><code>(omitted: ng-app="manageAppCollections", ng-controller="manageAppController")
  
  &lt;button type="button" class="btn btn-success" ng-href="./appConfForm" data-toggle="modal" data-target="#saveModal"&gt;Add an App&lt;/button&gt;
  
  &lt;div id="saveModal" class="modal inmodal fade" aria-hidden="true" role="dialog" tabindex="-1" refresh-modal&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  angular.module('manageAppCollections').directive("refreshModal", ['$compile', function($compile) {
  return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          element.on('loaded.bs.modal', function(e) {
              $compile(element.contents())(scope);
          }).on('hidden.bs.modal', function (e) {
              element.removeData('bs.modal');
          });
      }
  }
  </code></pre>
  
  <p>}])
      </p>
  
  <p>But now the error becomes: <code>Argument 'saveFormController' is not a function, got undefined</code></p>