LadyT LadyT - 6 months ago 4x
Javascript Question

AngularJS Error: $injector:unpr Unknown Provider - $modalInstanceProvider

I have a button that you click and it is supposed to open a modal onclick. However, when I click the button I get the error "Unknown provider: $modalInstanceProvider <- $modalInstance". I checked everything so far. What am I missing? Here is the code so far.

app. js - loading the ui-bootstrap.

var app = angular.module('myApp', ['ngRoute', 'ui.bootstrap']);

services.js - This is the modal service.

app.factory('modalService',['$uibModal', function($uibModal){
return {
openMenuModal: function(index, title, description) {
var modalObj = ${
templateUrl: 'partials/modal.html',
backdrop: 'static',
keyboard: true,
size: 'sm',
controller: function($scope, $modalInstance){
$scope.title = title;
$scope.description = description;

$scope.ok = function(id){
$scope.cancel = function(){

Home Controller

app.controller('home', [
'modalService', function($scope, contentService, $http, $uibModal, modalService){

$ = data;
$scope.shortcutList = $; // list of shortcuts
$ = $; // user's name
$scope.userThumb = $; // user thumbnail image

$scope.deleteBox = function(index, title, description){
modalService.openMenuModal('t', title, description);


modal template

<div ng-controller="Home">
<div class="modalBox animated fadeIn">
<h1> {{title}} </h1>
<div class="modal-footer"></div>

shortcut template button - This is where I want to call the deleteBox()

<button class="btn btn-primary deleteBox" ng-click="deleteBox($index, 'Are You sure you want to delete this?', 'description text')"></button>


You should use $uibModalInstance instead of $modalInstance.

Also in your html you put ng-controller="Home" and in your js file you declared the controller as home so you need to fix this so the names match.