Angular Cannot read property 'showmodal' of undefined - angularjs

Question

New to Angular and struggling through some modal service work. Currently stuck on a Cannot read property 'showModal' of undefined error when attempting to open the modal window.
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;
};
}]);
Controller script:
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>
}]);