Angular UI-Bootstrap Injector Error

Question

I am trying to use angular ui-bootstrap on my project. After adding the required script dependencies in my layout.cshtml, I get the following error;

Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20app.views.teachersWorkSchdules.index
    at http://localhost:6634/Scripts/angular.min.js:6:416
    at http://localhost:6634/Scripts/angular.min.js:41:121
    at Object.d [as get] (http://localhost:6634/Scripts/angular.min.js:39:92)
    at http://localhost:6634/Scripts/angular.min.js:41:195
    at d (http://localhost:6634/Scripts/angular.min.js:39:92)
    at Object.e [as invoke] (http://localhost:6634/Scripts/angular.min.js:39:362)
    at M.instance (http://localhost:6634/Scripts/angular.min.js:80:336)
    at D (http://localhost:6634/Scripts/angular.min.js:61:362)
    at g (http://localhost:6634/Scripts/angular.min.js:55:105)
    at http://localhost:6634/Scripts/angular.min.js:54:249 <div ui-view="" class="shuffle-animation col-xs-12 ng-scope" data-ng-animate="1">

This is a part of the head section of the layout.cshtml;

<!-- SignalR scripts -->
    <script src="~/signalr/hubs"></script>
    @Html.IncludeScript("~/Abp/Framework/scripts/libs/abp.signalr.js")

    @Scripts.Render("~/Bundles/App/Main/js")

    <!-- UIGrid References -->
    @*<script src="~/Scripts/ui-grid.min.js"></script>*@
    @*<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>*@
    <script type="text/javascript" src="~/Scripts/angular.min.js"></script>
    <script type="text/javascript" src="~/Scripts/angular-animate.min.js"></script>
    <script type="text/javascript" src="~/Scripts/angular-sanitize.min.js"></script>
    <script type="text/javascript" src="~/Scripts/ui-bootstrap-tpls-2.4.0.min.js"></script>

Here is the controller in which I wanna use the ui-bootstrap;

(function () {
    angular.module('app').controller('app.views.workSchdules.createDialog', [
        '$scope', '$log', '$modalInstance', 'abp.services.app.workDay', 
        function ($scope, $log, $modalInstance, workDayService) {
            var vm = this;

            $scope.mytime = new Date();
            $scope.ismeridian = true;

            $scope.changed = function () {
                $log.log('Time changed to: ' + $scope.mytime);
            };

            vm.workDays = [];

            function getWorkDays() {
                workDayService.getAllWorkDaysList().success(function (data) {
                    vm.workDays = data.items;
                });
            }


        }
    ]);


})();

Please I don't know what I'm doing wrong. I've been on this for several hours. Please help.