Ionic Modal with multible controllers and html files;

ionic-v1
1

I have an application with has an index.html and 4 other html files. Each file needs and has its own controller which are assingned in the specific html files. I want to add a modal view to show a chart. This should happen from the firstpage.html with the firstPageCTRL as controller. I added the following code into this controller:

$ionicModal.fromTemplateUrl('my-modal.html', {
   scope: $scope,
   animation: 'jelly'
}).then(function(modal) {
$scope.modal = modal; });
$scope.openModal = function() {
$scope.modal.show();};
$scope.closeModal = function() {
$scope.modal.hide();};});

At first I tried writing the html code for the modal into a new file. This workes for opening the Modal. but when it is open it is no longer part of the firstPageCTRL and I can’t close it again. The modal get’s opened with either ng-click="openModal() or ng-click="modal.show() both versions work.

The problem is that as soon as the modal opens it’s no longer part of the firstPageCTRL and loses the scope and can’t be closed.

Giving both html files the same controller doesn’t work. Adding the modal html code within a script tag at the end of the firstpage.html doesn’t work.

I also tried giving the modal.html it’s own controller but obviously that did not work because now the firstPageCTRL can’t open the modal view.

So my main problem is that I need to find a way to add my modal html code into my project in such a way that it shares the controller wit my firstpage.html. Any ideas?