Calling AngularJS Function From A Remote Page Loaded By Bootstrap Modal

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'.

Solution 1:

You don't need to create two 'ng-app'.

With only two controllers but with the same ng-app, you can do the job.

Can you try something like this : (EDIT: the code bellow doesn't works)

<div ng-controller="saveFormController">
    <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">
            <span aria-hidden="true">×</span>
            <span class="sr-only">Close</span>
        </button>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" name="eventEditForm">
            (omitted form content)
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
        <button class="btn btn-primary" type="button" ng-click='addApp()'>Submit</button>
    </div>
</div>

angular.module('manageAppCollections').controller('saveFormController', ['$scope, $http', function($scope, $http) {
    $scope.addApp = function(){
      console.log("Added!");
    }
}])

saveFormController becomes a controller of the manageAppCollections app

EDIT

To work with AngularJS and Bootrap, you could also use angular-ui, it's easier : http://angular-ui.github.io/bootstrap/#/modal

EDIT2

I edited my previous code, you can check the result here :

Plunkr

(from the doc)