UI Bootstrap Modal within Directive

Question

I'm using Angular 1.4.1 and UI Bootstrap 0.13.

I have a directive from which I'm opening a modal. The modal opens fine, but the buttons seemingly don't get bound to their handlers - they don't do anything. I've used this same code in another project just fine, except not from within a directive.

My directive:

(function () {
    var app = angular.module('myApp');

    app.directive('someDirective', function () {
        return {
            restrict: 'E',
            templateUrl: 'SomeDirective.html',
            scope: {
                list1: '=list1',
                list2: '=list2',
                save: '&'
            },
            controller: ['$scope','$modal','myService', function ($scope,$modal,myService) {
                $scope.openModal = function () {
                    var modalInstance = $modal.open({
                        templateUrl: 'ModalTemplate.html',
                        controller: 'modalController',
                        backdrop: 'static',
                        size: 'sm',
                        resolve: {
                            saveData: function () {
                                //do save action
                            }
                        }
                    });

                    modalInstance.result.then(
                        function (itemToSave) {
                            //save item
                        },
                        function () {
                            //Cancel
                        }
                    );
                };
            }]
        }
    });
}());

The modal's controller:

(function() {
    var app = angular.module('myApp');

    app.controller('modalController', [
        '$scope', '$modalInstance', 'saveData',
        function($scope, $modalInstance, saveData) {
            $scope.saveData = saveData;

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

            $scope.cancel = function() {
                $modalInstance.dismiss('cancel');
            };
        }
    ]);
}());

And the template for the modal content:

<div class="modal-header bg-info">
    <h3 class="modal-title">Add New Record</h3>
</div>
<div class="modal-body">
    <form class="form-horizontal" role="form"></form>
</div>
<div class="modal-footer bg-info">
    <button class="btn btn-primary" ng-click="save()">Save</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

My thought is that I'm having issues with scope, but I can't track it down. I have put break points on modalController. The app.controller() call happens when the app loads, I've seen that. But breakpoints within save() and cancel() never get hit.

Can someone help me figure out why the modal's buttons don't do anything?

Answer 1

This turned out to be a stupid mistake. At some point I apparently overwrote the name of one of the other controllers in my project with the same name of the controller I was using for the modal. The other controller did not have save() or cancel() methods so nothing was happening. As soon as I fixed my error and all controllers once again had their proper names this started working again.