Close button doesn't work in Angular UI Modal - angularjs

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")
});