Open a nested modal and close current (parent) modal

Question

From controller1 I'm opening a modal like this:

angular.module('myApp').controller('controller1', ['$scope', '$uibModal', function($scope, $uibModal) {

    $scope.openFirstModal = function() {

        var modalScope = $scope.$new();

        var modalInstance = $uibModal.open({
            templateUrl: 'views/modal1.html',
            controller: 'modal1Controller',
            scope: modalScope,
            resolve: {},
            size: 'lg'
        });

        modalScope.uibModalInstance = modalInstance;
    };

}]);

Then, I'm opening a nested modal like this:

angular.module('myApp').controller('modal1', ['$scope', '$uibModal', function($scope, $uibModal) {

    $scope.openSecondModal = function() {

        // Open nested modal
        var modalScope = $scope.$new();

        var modalInstance = $uibModal.open({
            templateUrl: 'views/modal2.html',
            controller: 'modal2Controller',
            scope: modalScope,
            resolve: {},
            size: 'lg'
        });

        modalScope.uibModalInstance = modalInstance;

        // Close this modal
        $scope.uibModalInstance.dismiss('cancel');
    };

}]);

But that last part:

        // Close this modal
        $scope.uibModalInstance.dismiss('cancel');

...is provoking problems in the nested modal. Nothing works in my nested modal:

angular.module('myApp').controller('modal2', ['$scope', '$uibModal', function($scope, $uibModal) {

    $scope.test = function() {
        console.log("test");
    };

}]);

If I remove the problematic piece of code, the nested modal works fine.

How can I close the first modal without making the nested modal to fail?

Answer 1

Ah, just found the problem.

I changed this:

    // Open nested modal
    var modalScope = $scope.$new();

With this:

    // Open nested modal
    var modalScope = $rootScope.$new();

That way the nested modal does not rely on his parent. The parent can die and the child will continue living