title: AngularJS angular-modal-service giving me an error
body: <p>I'm trying (unsuccessfully) to use AngularModalService.  Doing a copy/paste job from the admittedly simple tutorial gives me an error.</p>
  
  <p>This is the tutorial, for reference:
  <a href="http://www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/" rel="nofollow">http://www.dwmkerr.com/the-only-angularjs-modal-service-youll-ever-need/</a></p>
  
  <p>Javascript:
      </p>
  
  <pre><code>var app = angular.module('app', ['angularModalService']);
  
  app.controller( 'Controller', function($scope,ModalService) {
  
      $scope.show = function() {
          ModalService.showModal({
              templateUrl: 'modal.html',
              controller: "ModalController"
          }).then(function(modal) {
              modal.element.modal(); // this is the problem
              modal.close.then(function(result) {
                  $scope.message = "You said " + result;
              });
          });
      };
  });
  
  app.controller('ModalController', function( $scope, close ) {
      $scope.close = function(result) {
          close(result, 500);
      };
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML (uglier in the tutorial, but should be simpler)</p>
  
  <pre><code>&lt;div class="container" style="min-width: 700px; max-width: 700px; margin: 50px auto;" data-ng-app="app" data-ng-controller="Controller"&gt;
      &lt;h3&gt;Angular Modal Service&lt;/h3&gt;
      &lt;a class="btn btn-default" href ng-click="show()"&gt;Show a Modal&lt;/a&gt;
      &lt;p&gt;{{message}}&lt;/p&gt;
  
      &lt;!-- The html template --&gt;
      &lt;script type="text/ng-template" id="modal.html"&gt;
          &lt;div class="modal fade"&gt;
              &lt;button type="button" 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 is 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;/script&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The error I get is "undefined is not a function" on the line denoted above, which is:</p>
  
  <pre><code>modal.element.modal();
  </code></pre>
  
  <p>Google search has lead me to nothing concrete.  Hopefully I'm just overlooking something silly. </p>