title: Angular Modal Service
body: <p>I'm trying to get modals working in my Angular application. I tried using Bootstrap and Angular Material modals but I could not make them work. I decided to try with Angular Modal Service, however I'm getting the same error. Whenever I call the function ModalService.showModal I get the following error:</p>
  
  <pre><code>angular.js:12416 TypeError: Cannot read property 'showModal' of undefined
  at Scope.$scope.show (AboutController.js:4)
  at fn (eval at &lt;anonymous&gt; (angular.js:13231), &lt;anonymous&gt;:4:203)
  at callback (angular.js:23371)
  at Scope.$eval (angular.js:15878)
  at Scope.$apply (angular.js:15978)
  at HTMLAnchorElement.&lt;anonymous&gt; (angular.js:23376)
  at HTMLAnchorElement.n.event.dispatch (jquery-2.2.3.min.js:3)
  at HTMLAnchorElement.r.handle (jquery-2.2.3.min.js:3)
  </code></pre>
  
  <p><strong>The service im using:</strong></p>
  
  <pre><code>https://github.com/dwmkerr/angular-modal-service
  </code></pre>
  
  <p><strong>The JS Fiddle example that I used:</strong></p>
  
  <pre><code>http://jsfiddle.net/dwmkerr/8MVLJ/?utm_source=website&amp;utm_medium=embed&amp;utm_campaign=8MVLJ
  </code></pre>
  
  <p><strong>Include:</strong></p>
  
  <pre><code>&lt;!-- Include jQuery --&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"&gt;&lt;/script&gt;
  &lt;!-- Include Bootstrap --&gt;
  &lt;script src="../node_modules/bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;!-- Include Angular --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"&gt;&lt;/script&gt;
  &lt;!-- Include ModalService--&gt;
  &lt;script src="../node_modules/angular-modal-service/dst/angular-modal-service.min.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p><strong>About.html:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="col-sm-6 col-sm-offset-3 form-box"&gt;
  
  &lt;h3&gt;Comentarios&lt;/h3&gt;
  
  &lt;a class="btn btn-default" href ng-click="show()"&gt;Show a Modal&lt;/a&gt;
   &lt;!-- The actual modal template, just a bit o bootstrap --&gt;
   &lt;script type="text/ng-template" id="modal.html"&gt;
       &lt;div class="modal fade"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Yes or No?&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;p&gt;It's your call...&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal"&gt;No&lt;/button&gt;
              &lt;button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal"&gt;Yes&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
   &lt;/script&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>App.module.js:</strong></p>
  
  <pre><code>var Tiendiia = angular.module('Tiendiia', ['ui.router', 'ngMaterial', 'ui.bootstrap', 'ngCookies', 'angularModalService',]);
  
  Tiendiia.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
  .primaryPalette('yellow')
  .accentPalette('orange')
  .warnPalette('amber')
  .backgroundPalette('grey');
  });
  </code></pre>
  
  <p><strong>AboutController.js</strong></p>
  
  <pre><code>Tiendiia.controller('AboutController', ['$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;
          });
      });
  };
  
  
  }]);
  </code></pre>
  
  <p><strong>ModalController.js</strong></p>
  
  <pre><code>Tiendiia.controller('ModalController', function($scope, close) {
  
   $scope.close = function(result) {
  close(result, 500); // close, but give 500ms for bootstrap to animate
  };
  
  });
  </code></pre>
  
  <p>I have looked everywhere I could, but I can't find why it's not working. </p>
  
  <p>Thanks!</p>