ui bootstrap modal Unknown provider $uibModalInstanceProvider - angularjs

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">×</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">
Zapomniałem hasł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.