Trying to use ModalService. Getting “ModalService is undefined” error

Question

I have loaded jquery, bootstrap, angularjs and modalservice in the right order. I am getting the error: "ModalService is undefined". Even though the ModalService has loaded properly. Can someone please help me to understand what is wrong:

 app.js: var myApp=angular.module('App',['ngRoute','listApp']); myApp.config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'list.html', controller: 'listCtrl' }) .otherwise({ templateUrl: 'list.html', controller: 'listCtrl' }); }); controllers.js: var listApp=angular.module('listApp',['angularModalService']); listApp.controller('listCtrl', ['$scope', function(scope,ModalService){ scope.show = function() { ModalService.showModal({ templateUrl: 'modal.html', controller: "ModalController" }).then(function(modal) { modal.element.modal(); modal.close.then(function(result) { scope.message = "You said " + result; }); }); }; }]); listApp.controller('ModalController', function(scope, close) { scope.close = function(result) { close(result, 500); }; }); 

 index.html: <link rel="stylesheet" href="css/bootstrap.css"/> <link rel="stylesheet" href="css/index.css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript" src="js/angular-routing.js"></script> <script type="text/javascript" src="js/app.js"></script> <script type="text/javascript" src="js/controllers.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/angular-modal-service.js"></script> list.html: <div ng-app="listApp" ng-controller="listCtrl"> <a class="btn btn-default" href ng-click="show()">Show a Modal</a> <script type="text/ng-template" id="modal.html"> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Yes or No?</h4> </div> <div class="modal-body"> <p>It's your call...</p> </div> <div class="modal-footer"> <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button> <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button> </div> </div> </div> </div> </script> </div> 

Answer 1

Inject Your Dependency properly.

In your Controller added "ModalService" Dependency.

listApp.controller('listCtrl', ["$scope", "ModalService", function(scope, ModalService){
}]);

Note:

I highly recommend to use angular ui-bootstrap for modal service instead of separate plugin. It Provide a lot of handy options parameter to configure modal according to your requirement.

https://angular-ui.github.io/bootstrap/#/modal

Hope This Helps!