Close button doesn't work in Angular UI Modal

Question

In this PLUNK I have an Angular UI Modal and a button to close it. The button doesn't work because the Modal instance doesn't have a close method.

If you remove the rendered statement, the button works. Why doesn't it work WITH rendered?

This DOESN'T work:

var app = angular.module('app', ['ui.bootstrap']);

app.controller('myCtl', function($scope,$uibModal) {

        $scope.openModal = function() {
          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html',
              scope: $scope
            }).rendered.then(function() {
                 alert("modal rendered")
            }); 
        };

        $scope.close = function () {
            $scope.modalInstance.close();
        };

})

This DOES work (see PLUNK):

var app = angular.module('app', ['ui.bootstrap']);

app.controller('myCtl', function($scope,$uibModal) {

        $scope.openModal = function() {
          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html',
              scope: $scope
            }); 
        };

        $scope.close = function () {
            $scope.modalInstance.close();
        };

})

Answer 1

In the first case, you are assigning the rendered promise to $scopemodalInstance, not the instance. It works if you do something like (Plunk):

$scope.modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope
});
$scope.modalInstance.rendered.then(function() {
    alert("modal rendered")
});