Error: $injector:unpr Unknown Provider when adding $uibModalInstance to controller - angularjs

Question

When I add $uibModalInstance to my controller I get the error:
Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- EventAdditionalInformationTabCtrl
My controller is defined as:
angular.module('myWebApp.controllers').
controller('EventAdditionalInformationTabCtrl', function ($scope, $uibModalInstance, eventData) {
});
I have another controller that defines the open function:
controller('modalCtrl', function ($scope, $uibModal) {
$scope.open = function (template, instance, size) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: template,
controller: instance,
size: size
});
};
}).
Then I want to pass the controller that will handle a specific instance of a modal, in this case EventAdditionalInformationTabCtrl.
My app is defined as:
var app = angular.module('myWebApp', [
'myWebApp.services',
'myWebApp.controllers',
'ui.router',
'duScroll',
'ngAnimate',
'ui.bootstrap',
'angularUtils.directives.dirPagination',
'angular-loading-bar'
]);
What am I missing?
EDIT ----
Here's how EventAdditionalInformationTabCtrl is linked to the view in ui-Router.
$stateProvider
.state('event', {
url: '/event',
params: {
eventId: null
},
resolve: {
eventData: ['$http', '$stateParams', function ($http, $stateParams) {
console.log('EventId: ' + $stateParams.eventId);
return $http.get('http://localhost:10569/api/eventView/' + $stateParams.eventId).then(function(response) {
return response.data;
});
}]
},
views: {
'': {
templateUrl: 'partials/events/event.html'
//controller: 'EventCtrl'
},
'eventHeader#event' : {
templateUrl: 'partials/events/event-header.html',
controller: 'EventHeaderCtrl'
},
'eventOverviewTab#event': {
templateUrl: 'partials/events/event-overview-tab.html',
controller: 'EventOverviewTabCtrl'
},
'eventDSOTab#event': {
templateUrl: 'partials/events/event-dso-tab.html',
controller: 'EventDSOTabCtrl'
},
'eventAdditionalInformationTab#event': {
templateUrl: 'partials/events/event-additional-information-tab.html',
controller: 'EventAdditionalInformationTabCtrl'
},
'eventFooter#event': {
templateUrl: 'partials/events/event-footer.html',
controller: 'EventFooterCtrl'
}
}
});

Answer 1

Where you have $uibModalInstance now should just be $uibModal. Use $uibModalInstance when you want to actually create a modal. This plunker is the official example for how to use $uibModal.

Answer 2

You need to inject '$uibModal' into your controller.
Check out the angular ui docs here https://angular-ui.github.io/bootstrap/#/modal
EDIT:
Change this
animation: true,
templateUrl: template,
controller: instance,
size: size
to this
animation: true,
templateUrl: template,
controller: EventAdditionalInformationTabCtrl,
size: size