Ionic - Cannot use $ionicModal inside a function - angularjs

Question

I am trying to use $ionicModal after an asynchronous operation. What I did is placing the following code inside a callback function that executes after an associated service performs an $http call:
$ionicModal.fromTemplateUrl('templates/modals/profile-update.html', {
scope: $scope
})
.then(instance => {
vm.modal = instance;
})
The above code works fine when it's placed inside the controller's main block. However, in this case, I want it inside a function openProfilePopup. I've tried the following code but it isn't working, the modal doesn't appear and no errors are displayed in the console:
activate();
function activate() {
profPopupService
.get()
.then(openProfilePopup, handleError);
}
function openProfilePopup(profile) {
vm.profile = profile;
$ionicModal.fromTemplateUrl('templates/modals/profile-update.html', {
scope: $scope
})
.then(instance => {
vm.modal = instance;
})
.catch(error => {
$log.log(error);
});
vm.modal.show();
}
Here is the template code for the modal. I've used a separate controller for the modal instead of the controller associated with the code above.
<ion-modal-view cache-view="false">
<ion-header-bar class="bar bar-header bar-dark">
<div class="buttons">
<button class="button-icon light ion-ios-arrow-back" ng-click="dashboard.modal.hide()"></button>
</div>
<h1 id="page-title" class="title">Update Your Profile</h1>
</ion-header-bar>
<ion-content class="profile-popup" ng-controller="ProfilePopupCtrl as pp">
<form name="profileForm" method="POST" ng-submit="pp.update(profileForm.$valid)" novalidate>
<!-- Not displaying here -->
</form>
</ion-content>
</ion-modal-view>
My goal is to obtain data from the controller that initiate the modal via show() function and pass that data to the modal's controller:
function ProfilePopupCtrl($log, $scope) {
const vm = this;
vm.user = $scope.$parent.dashboard.profile;
.......
}

Answer 1

Call show method inside .then()
function openProfilePopup(profile) {
vm.profile = profile;
$ionicModal.fromTemplateUrl('templates/modals/profile-update.html', {
scope: $scope
})
.then(instance => {
vm.modal = instance;
vm.modal.show();
})
.catch(error => {
$log.log(error);
});
}
Or
Define the modal outside the function. Just call show method of the modal when function call is done.
.controller('MyController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.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();
};
Now in the function
function openProfilePopup(profile) {
$scope.profile = profile;
$scope.openModal();
}
You can use controller as syntax if you want to use it like, vm.something