Angular无法读取属性＆＃39; showmodal＆＃39;未定义的

Question

Angular的新手，并通过一些模态服务工作挣扎。目前卡在一个无法阅读的财产＆＃39; showModal＆＃39;尝试打开模态窗口时出现未定义的错误。

modalService

angular.module('cloudPortalApp').service('modalService', ['$modal',
function ($modal) {

    var modalDefaults = {
        backdrop: true,
        keyboard: true,
        modalFade: true,
        templateUrl: '/Shared/NewCommission.cshtml'
    };

    var modalOptions = {
        closeButtonText: 'Close',
        actionButtonText: 'OK',
        headerText: 'Proceed?',
        bodyText: 'Perform this action?'
    };

    this.showModal = function (customModalDefaults, customModalOptions) {
        if (!customModalDefaults) customModalDefaults = {};
        customModalDefaults.backdrop = 'static';
        return this.show(customModalDefaults, customModalOptions);
    };

    this.show = function (customModalDefaults, customModalOptions) {
        //Create temp objects to work with since we're in a singleton service
        var tempModalDefaults = {};
        var tempModalOptions = {};

        //Map angular-ui modal custom defaults to modal defaults defined in service
        angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

        //Map modal.html $scope custom properties to defaults defined in service
        angular.extend(tempModalOptions, modalOptions, customModalOptions);

        if (!tempModalDefaults.controller) {
            tempModalDefaults.controller = function ($scope, $modalInstance) {
                $scope.modalOptions = tempModalOptions;
                $scope.modalOptions.ok = function (result) {
                    $modalInstance.close(result);
                };
                $scope.modalOptions.close = function (result) {
                    $modalInstance.dismiss('cancel');
                };
            }
        }

        return $modal.open(tempModalDefaults).result;
    };

}]);

控制器脚本：

angular.module("cloudPortalApp").controller('commissionManagerIndexController',['$scope', '$http', '$window', function ($scope, $http, $modal, $log, modalService, dataService) {
$scope.commissionCount = 0;


$scope.showNewCommissionModal = function () {

    var modalDefaults = {
        backdrop: true,
        keyboard: true,
        modalFade: true,
        templateUrl: '/Views/Shared/NewCommission.cshtml'
    }

    modalService.showModal(modalDefaults, {}).then(function (result) {

    });
}

HTML：

@section Scripts {
<script src="~/Scripts/angular-ui/ui-bootstrap.js"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="~/js/modalService.js"></script>
<script src="~/js/commissionManagerIndex.js"></script>

}

<script id="template" type="text/x-kendo-template">
    <div class="toolbar">
        @*<a class="k-button" href="\#" ng-click="toolbarClick()">Create New Commission</a>*@

        <button kendo-button ng-click="edit(this)"><span class="k-icon k-i-tick"></span>Edit</button>
    </div>

</script>

<h2>Commission Manager</h2>

<h3>CommissionCount: {{ commissionCount }}</h3>

<div class="text-left">
    <button type="button" class="btn btn-primary" ng-click="showNewCommissionModal()">
        Create New Commission
    </button>
</div>

}]）;