Two modal two controller

hi guys,
i have an app.js with two controller and a modal for each one:

angular.module(‘starter’, [‘ionic’])

$ionicModal.fromTemplateUrl(‘templates/modal1.html’, {
scope: $scope,
animation: ‘slide-in-up’
}).then(function(modal) {
$scope.modal = modal;
});

$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};

});

.controller(‘ctrl2’, function($scope, $ionicModal) {

$ionicModal.fromTemplateUrl(‘templates/modal2.html’, {
scope: $scope,
animation: ‘slide-in-up’
}).then(function(modal) {
$scope.modal = modal;
})

$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};

});

then in the index.html:

<div ng-controller="ctrl1">

<button ng-click="openModal()">show modal 1</button>

</div>
<br>

<div ng-controller="ctrl2">

 <button ng-click="openModal()">show modal 2</button>

</div>

why it doesn’t work?

please help me, sorry I’m a neophyte