Issue injecting angular-ui into my controller - angularjs

Question

I have ui.bootstrap as a dependency in my app, but I'm having an issue injecting the $modal service into my controller.
I'm getting the following error:
$modal is not defined
in my controller code, specifically in this function below where I attempt to open a modal :
function saveAndDisplayReport() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
$location.url('index.html#/?reptname=' + vm.reptName);
}
Here's my reportmaint.js controller code header section, but Im' unclear on how to inject ui.bootstrap (please see the $modal parameter):
(function () {
'use strict';
var controllerId = 'reportmaint';
angular.module('app').controller(controllerId, ['$rootScope', '$scope', '$location', 'common', 'datacontext',
'gridHierarchyService', 'reportsContext', '$modal', reportmaint]);
function reportmaint($rootScope, $scope, $location, common, datacontext, gridHierarchyService, reportsContext) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var logErr = getLogFn("error");
...
})();
and here is my app.js where 'ui.bootstrap' is defined:
(function () {
'use strict';
var app = angular.module('app', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: sidebar.js)
// Custom modules
'common', // common functions, logger, spinner
'common.bootstrap', // bootstrap dialog wrapper functions
// 3rd Party Modules
'ui.bootstrap', // ui-bootstrap (ex: carousel, pagination, dialog)
'kendo.directives', // Kendo UI
'app.customcontrollers' // Language/Currency settings
//'ngjqxsettings' // jQWidgets init and directives (loaded in index.html)
]);
app.run(['$route', '$rootScope', 'common', 'userService', function ($route, $rootScope, common, userService) {
console.log("In app.run");
var getLogFn = common.logger.getLogFn;
var log = getLogFn('app');
}]);
})();
and in my index.html file I have the script reference :
<script src="scripts/ui-bootstrap-tpls-0.10.0.js"></script>
I am using this plunker as a live example, but I'm still going wrong somewhere - http://plnkr.co/edit/KsADLPaOfY7rtPTdWyYn?p=preview
thanks in advance for your help...
Bob

Answer 1

it seems like you are not injecting the modal at all ($modal is missing) in the function of your controller; try something like:
I'm not sure if reportmaint is a service, if not, just remove it
angular.module('app').controller('reportmaint', ['$rootScope', '$scope', '$location', 'common', 'datacontext','gridHierarchyService', 'reportsContext', '$modal', 'reportmaint',
function($rootScope, $scope, $location, common, datacontext, gridHierarchyService, reportsContext, $modal, reportmaint) {
//Client code
}
]);