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)

<divng-controller="saveFormController"><divclass="modal-header"><buttonclass="close"data-dismiss="modal"type="button"><spanaria-hidden="true">×</span><spanclass="sr-only">Close</span></button></div><divclass="modal-body"><formclass="form-horizontal"name="eventEditForm">
            (omitted form content)
        </form></div><divclass="modal-footer"><buttonclass="btn btn-default"data-dismiss="modal"type="button">Cancel</button><buttonclass="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)