heliotrope heliotrope - 5 months ago 437
Javascript Question

Angular $injector:unpr with uibModal

The code is almost straight from the ui-bootstrap tutorial. I have a button on my homepage with an ng-click for opening the modal window, but the error I receive in dev tools is :

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

and each click after this adds a
to the error message, like

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

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


'use strict';

.controller('homeCtrl', ['$q', '$state', '$timeout', '$scope', '$http', '$filter',
'$uibModal', function($q, $state, $timeout, $scope, $http, $filter, $uibModal){

$scope.open = function (size){
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'app/main/searchModal.html',
controller: 'modalController',
size: size,
resolve: {
items: function () {
return $scope.items;

modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {


'use strict';

.controller('modalController', ['$scope', '$uibModalInstance', function($scope, $uibModalInstance) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]

$scope.ok = function () {

$scope.cancel = function () {


The problem is on our (the library's) end. When we released 0.14.0 and added all the uib prefixes, we missed adding it to modalInstance. The issue was fixed in 0.14.3.

To fix this issue in 0.14.0 - 0.14.2 simply use $modalInstance instead and note that when you upgrade to 1.0, you'll need to change to $uibModalInstance or the code will barf again.

Here's a link to the relevant issue on GitHub.