setting up a modal controller in a custom directive

Question

* I have updated this question to reflect the error that I am having. *

I am looking to create a custom modal directive that can be reusable.
I created a controller in the directive and created a controller for the modal. The modal controller is also inside of the directive. I having some trouble getting this going.

Inside of my console I am getting

Argument 'ModalInstanceCtrl' is not a function, got undefined.

The ModalInstanceCtrl exists inside of the open function

Here is a link to my plunker http://plnkr.co/edit/IQWQJIdgZNNJlHebfe8R?p=preview.

I have tried it in my return object.

function myModal() {
        return {
            restrict: 'A',
            scope: {},
            templateUrl: 'modal.html',
            controller: ModalController,
            controllerAs: vm,
            bindToController: true
        }
    }

I have created a template with a button to call the open()

function ModalController($modal, $log) {
        var vm = this;
        vm.animationsEnabled = true;

        vm.open = open;

        function open() {
            var modalInstance = $modal.open({
                animation: vm.animationsEnabled,
                templateUrl: 'app/components/modal/modal.html',
                controller: 'ModalInstanceCtrl',
                controllerAs: 'vm',
                size: 'lg',
                resolve: {
                    title: function() {
                        return 'training Info';
                    }
                }           
            });
            modalInstance.result.then(function(selectedItem) {
                console.log(selectedItem);
                vm.selectedItem = selectedItem;
            }, function() {
                $log.info('modal dismissed at: ' + new Date());
            });
        } // end of open

        function ModalInstanceCtrl() {
            console.log('in');

        }
    }

This also did nothing and is leaving me with no errors to work back from. I am wondering if this approach can or should be done? I am also wondering how to work around the fact that template is used in two places. Not sure if to comment one out (I have tried that). Below is the full directive.

    (function() {
    'use strict';

    angular
        .module('app.components.modal')

        .directive('myModal', myModal);

function myModal() {
                return {
                    restrict: 'A',
                    scope: {},
                    template: 'template: "<button class='btn btn-danger' ng-click='open()'>Beer </button",',
                    controller: ModalController,
                    controllerAs: vm,
                    bindToController: true
                }
            }

            function ModalController($modal, $log) {
                var vm = this;
                vm.animationsEnabled = true;

                vm.open = open;

                function open() {
                    var modalInstance = $modal.open({
                        animation: vm.animationsEnabled,
                        templateUrl: 'app/components/modal/modal.html',
                        controller: 'ModalInstanceCtrl',
                        controllerAs: 'vm',
                        size: 'lg',
                        resolve: {
                            title: function() {
                                return 'training Info';
                            }
                        }           
                    });
                    modalInstance.result.then(function(selectedItem) {
                        console.log(selectedItem);
                        vm.selectedItem = selectedItem;
                    }, function() {
                        $log.info('modal dismissed at: ' + new Date());
                    });
                } // end of open

                function ModalInstanceCtrl() {
                    console.log('in');

                }
            }

    })();

Answer 1

There were too many problems in your code to mention here, but I fixed a few so you can be on your merry way.

http://plnkr.co/edit/Q8P9mvT99p90O4Xl4hPp

One of the main problems your code had is that you didn't define your open function as a method:

        function open() {

Should be

        this.open = function() {

If you don't know what the difference is then you should learn a little bit about how objects work in Javascript. Or you can skip that and start to code in Typescript or ECMAScript 2015 using classes.

Please note: you're using an incredibly old version angular-bootstrap. This version does not support the use of the controllerAs syntax. I have therefore reverted to $scope to get your code working quickly.