title: $uibModalProvider <- $uibModal <- StatusModalService giving error
body: <p>Trying to built a modal with angularjs and ui-bootstrap:</p>
  
  <p>Version </p>
  
  <ul>
  <li><p>Angularjs and its component is 1.5.3</p></li>
  <li><p>ui-bootstrap-tpls-1.3.3.js.</p></li>
  </ul>
  
  <p>In main app file I have included <em>'ui.bootstrap'</em> as</p>
  
  <pre><code>var App = angular.module('aotaApp', ['ui.router','ui.bootstrap','checklist-model','ngSanitize'])
  .controller("myController", function($scope,$state, $http)
  </code></pre>
  
  <p>In StatusService I am using this as </p>
  
  <pre><code>App.service("StatusModalService", ["$uibModal",
                            function ($uibModal) {
       var modalDefaults = {
           backdrop: true,
           keyboard: true,
           modalFade: true,
           templateUrl: 'resources/template/modal/confirmationModal.html'
       };
      var modalOptions = {
           closeButtonText: 'Close',
           actionButtonText: 'OK',
           headerText: 'Proceed?',
           bodyText: 'Perform this action?'
       };
  
       this.showModal = function (customModalDefaults, customModalOptions) {
           if (!customModalDefaults) customModalDefaults = {};
           customModalDefaults.backdrop = 'static';
           return this.show(customModalDefaults, customModalOptions);
       };
  
       this.show = function (customModalDefaults, customModalOptions) {
           //Create temp objects to work with since we're in a singleton service
           var tempModalDefaults = {};
           var tempModalOptions = {};
  
           //Map angular-ui modal custom defaults to modal defaults defined in service
           angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
  
           //Map modal.html $scope custom properties to defaults defined in service
           angular.extend(tempModalOptions, modalOptions, customModalOptions);
  
           if (!tempModalDefaults.controller) {
               tempModalDefaults.controller = function ($scope, $uibModalInstance) {
                   $scope.modalOptions = tempModalOptions;
                   $scope.modalOptions.ok = function (result) {
                       $uibModalInstance.close(result);
                   };
                   $scope.modalOptions.close = function (result) {
                       $uibModalInstance.dismiss('cancel');
                   };
               }
           }
  
           return $uibModal.open(tempModalDefaults).result;
       };
   }]);
  </code></pre>
  
  <p>But I am  getting error</p>
  
  <blockquote>
    <p>angular-1.5.3.js:13424 Error: [$injector:unpr] Unknown provider:
    $uibModalProvider &lt;- $uibModal &lt;- StatusModalService</p>
  </blockquote>
  
  <p>I am new to angular and mainly found to add ui.bootstrap in app. but it's not giving any help.</p>
  
  <p>Please guide me.</p>