Angular Modal - closing/dismissing modal

Question

I am new to Angular and trying to implement a modal. Having problem closing/dismissing the modal - when I click the cancel button, nothing happens. Here is the controller code:

angular.module('navApp')
    // Passing the $modal to controller as dependency
    .controller('HomeCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) {
        $scope.title = "Hello, Angm-Generator!";
        $scope.open = function () {
            var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalCtrl'
            });
        };
    }])

    .controller('ModalCtrl', function ($scope, $uibModalInstance) {
        // Added some content to Modal using $scope
        $scope.content = "ModalCtrl, Yeah!"
        // Add cancel button
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };
    })

and here is the template view of the actual modal

<!-- Modal Script -->
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <button type="button" class="close" datadismiss="modal" aria-hidden="true">&times;</button>
        <h3 class="modal-title">Hello from Modal!</h3>
    </div>
    <div class="modal-body">
        Modal Content from: <b>{{ content }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-danger" ngclick="cancel()">Cancel</button>
    </div>
</script>

Even clicking the cross on the top right of modal doesn't close the modal. Any ideas? Thanks:)

Solution 1

Should it not be ng-click="cancel()" instead of ngclick?

Also I don't think the scope is bound to the controller, I haven't tested this but I believe you need some more options:

var modalInstance = $uibModal.open({
   templateUrl: 'myModalContent.html',
   controller: 'ModalCtrl',
   controllerAs: '$mCtrl',
   bindToController: true
});

And then just update your template:

ng-click="$mCtrl.cancel()"

Solution 2

Have you tried $uibModalInstance.close()?

Another thing you can do is

 $scope.open = function () {
        var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalCtrl'
        });
        modalInstance.result.then(function successCallBack() {
            modalInstance.close()
         }, function errorCallBack() {
            modalInstance.close()
        })
    };`

Comments

[Haymaker87]

You're right about the ng-click, but the controller declaration and use of $scope is fine.

[A Allen]

Thanks all, ng-click makes it work. But adding the other options seem to make it stop working. Funny thing is, the modal is still not closing when I click the cross on the top right corner.

[DerMike]

No, the original Bootstrap way does not work. OP uses UI Bootstrap, which has "re-implemented all the controls in native NG". See github.com/angular-ui/bootstrap/issues/941