ui bootstrap modal Unknown provider $uibModalInstanceProvider

Question

I am stuck again with my angular ui-bootstrap modal window.

I have header which contains

<a ng-click="openLoginModal()">Zaloguj</a>

and have controller named headerCtrl.js

app.controller('HeaderCtrl', ['$scope', '$uibModal', 'ApiService', function($scope, $uibModal, ApiService) {
"use strict";
$scope.allGames = ApiService.GetGames();

$scope.openLoginModal = function(size, parentSelector) {
    var parentElem = parentSelector ?
        angular.element($document[0].querySelector('.modal-login' + parentSelector)) : undefined;

    var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        ariaLabelledBy: 'modal-header',
        ariaDescribedBy: 'modal-body',
        templateUrl: 'app/views/modals/LoginModal.html',
        controller: 'LoginModalCtrl',
        controllerAs: '$ctrl',
        backdropClass: "modal-backdrop",
        size: size,
        backdrop: true,
        appendTo: parentElem,

        resolve: {
            items: function() {
                return $scope.items;
            }
        }
    });
};

}]);

After I click "Zaloguj" which starts openLoginModal method modal shows but doesn't have any content and in cosole shows error:

Error: [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- LoginModalCtrl

LoginModalCtrl is induced in headerCtrl at line 14:

controller: 'LoginModalCtrl',

LoginModalCtrl.js code:

app.controller('LoginModalCtrl', ['$scope', '$location', '$uibModalInstance', 'authenticationService', function($scope, $location, $uibModalInstance, authenticationService) {
var $ctrl = this;
$ctrl.modalInstance = null;

$ctrl.animationsEnabled = true;

$ctrl.cancel = function() {
    $uibModalInstance.dismiss('cancel');
};

$ctrl.login = function() {
    authenticationService.login($ctrl.loginData)
        .then(function(data) {

            $uibModalInstance.close();
            $location.url("/");

        }, function(error) {

        });
};

}]);

EDIT Modal template code is:

<div class="modal-login">
<script type="text/ng-template" id="loginModalContent.html">
    <div id="ModalLog" tabindex="-1" role="dialog" aria-labelledby="Zaloguj się">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" ng-click="$ctrl.cancel();"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="myModalLabel">Zaloguj się do accTrader.com</h2>
            </div>
            <div class="modal-body">
                <form method="post" name="loginData">
                    <label for="login">Login:</label>
                    <input type="text" placeholder="login123" ng-model="$ctrl.loginData.login" name="login" title="Wpisz swój login, użyj 6 do 20 znaków!" required />

                    <label for="password">Hasło:</label>
                    <input type="password" placeholder="hasło" ng-model="$ctrl.loginData.password" name="password" title="Wpisz swój login, użyj 8 do 20 znaków!" required />

                    <div class="row forget-valid">
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                            <a href="/forget" title="zapomniałem hasła">Zapomniałem hasła</a>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 text-right">
                            <span ng-show="(loginData.login.$touched && loginData.login.$invalid)||(loginData.password.$touched && loginData.password.$invalid)" class="error">
                                Pola nie mogą zostać puste!
                            </span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default close-button" ng-click="$ctrl.cancel()">Zamknij</button>
                <button type="button" ng-disabled="loginData.login.$invalid || loginData.password.$invalid" class="btn btn-primary btn-md" ng-click="$ctrl.login()">Zaloguj się</button>
            </div>
        </div>
    </div>
</script>

help

Answer 1

You need to include $uibModal as a parameter to the controller function just like you have done for $scope.