title: Angular modal service error - TypeError: modal.element.modal is not a function
body: <p>I have problem with an angular <a href="https://github.com/dwmkerr/angular-modal-service" rel="noreferrer">modal service</a></p>
  
  <p>My app.js includes:</p>
  
  <pre><code>angular.module('myApp', ['myApp.test', 'ui.bootstrap','smart-table''angularModalService','ngRoute','myApp.productInsert',...
  </code></pre>
  
  <p>test.js:</p>
  
  <pre><code>    'use strict';
  
  angular.module('myApp.test', ['angularModalService'])
  
  
  
   .controller('ComplexController', [
    '$scope', '$element', 'title', 'close', 
    function($scope, $element, title, close) {
  
    $scope.name = null;
    $scope.age = null;
    $scope.title = title;
  
    //  This close function doesn't need to use jQuery or bootstrap, because
    //  the button has the 'data-dismiss' attribute.
    $scope.close = function() {
        close({
        name: $scope.name,
        age: $scope.age
      }, 500); // close, but give 500ms for bootstrap to animate
    };
  
    //  This cancel function must use the bootstrap, 'modal' function because
    //  the doesn't have the 'data-dismiss' attribute.
    $scope.cancel = function() {
  
      //  Manually hide the modal.
      $element.modal('hide');
  
      //  Now call close, returning control to the caller.
      close({
        name: $scope.name,
        age: $scope.age
      }, 500); // close, but give 500ms for bootstrap to animate
    };
  
  }]);
  </code></pre>
  
  <p>And then test.html</p>
  
  <pre><code>&lt;div class="modal fade"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;{{title}}&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Here's a more complex modal, it contains a form, data is passed to the controller 
           and data is returned from the modal.&lt;/p&gt;
  
          &lt;form class="form-horizontal" role="form"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="name" class="col-sm-2 control-label"&gt;Name&lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
                &lt;input type="text" class="form-control" id="name" placeholder="Your Name" ng-model="name"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="age" class="col-sm-2 control-label"&gt;Age&lt;/label&gt;
              &lt;div class="col-sm-10"&gt;
                &lt;input type="number" class="form-control" id="inputPassword3" placeholder="Age" ng-model="age"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
  
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal"&gt;OK&lt;/button&gt;
          &lt;button type="button" ng-click="cancel()" class="btn"&gt;Cancel&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the main page that opens modal windows </p>
  
  <pre><code>'use strict';
  
  angular.module('myApp.ricetta2', ['ngRoute', 'angularModalService','ui.bootstrap'])
  
          .config(['$routeProvider', function($routeProvider) {
                  $routeProvider.when('/ricetta2', {
                      templateUrl: 'views/ricetta/ricetta2.html',
                      controller: 'CartForm'
                  });
              }])
  
          .controller('CartForm', ['$scope','ModalService', function($scope, ModalService) {
                  $scope.invoice = {
                      items: [{
                              qty: 10,
                              description: 'Pomodori',
                              cost: 'Kg'}, {
                              qty: 10,
                              description: 'Olio',
                              cost: 'litri'}, {
                              qty: 4,
                              description: 'Pasta',
                              cost: 'Kg'}]
                  };
  
                  $scope.addItem = function() {
                      $scope.invoice.items.push({
                          qty: 1,
                          description: '',
                          cost: ''
                      });
                  },
                          $scope.removeItem = function(index) {
                              $scope.invoice.items.splice(index, 1);
  
                          },
                          $scope.total = function() {
                              var total = 0;
                              angular.forEach($scope.invoice.items, function(item) {
                                  total += item.qty * item.cost;
                              });
  
                              return total;
                          };
  
                  $scope.items = ['item1', 'item2', 'item3'];
                  $scope.productList = [];
  
  
  
                $scope.showComplex = function() {
  
                      ModalService.showModal({
                          templateUrl: "views/test/test.html",
                          controller: "ComplexController",
                          inputs: {
                              title: "A More Complex Example"
                          }
                      }).then(function(modal) {
                          modal.element.modal();
                          modal.close.then(function(result) {
                              $scope.complexResult = "Name: " + result.name + ", age: " + result.age;
                          });
                      });
  
                  };
  
  
              }]);
  </code></pre>
  
  <p>When I try to open Modal windows I have always an error on the page: </p>
  
  <blockquote>
    <p>TypeError: modal.element.modal is not a function
        at ricetta2.js:60
        at processQueue (angular.js:13248)
        at angular.js:13264
        at Scope.$get.Scope.$eval (angular.js:14466)
        at Scope.$get.Scope.$digest (angular.js:14282)
        at Scope.$get.Scope.$apply (angular.js:14571)
        at done (angular.js:9698)
        at completeRequest (angular.js:9888)
        at XMLHttpRequest.requestLoaded (angular.js:9829)(anonymous function) @ angular.js:11655$get @ angular.js:8596processQueue @ angular.js:13256(anonymous function) @ angular.js:13264$get.Scope.$eval @ angular.js:14466$get.Scope.$digest @ angular.js:14282$get.Scope.$apply @ angular.js:14571done @ angular.js:9698completeRequest @ angular.js:9888requestLoaded @ angular.js:9829</p>
  </blockquote>
  
  <p>I have all the resources linked on the index.html:</p>
  
  <pre><code>&lt;link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css"&gt;
  &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
          &lt;script src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"&gt;
          &lt;script src="bower_components/angular-modal-service/dst/angular-modal-service.js"&gt;&lt;/script&gt;
          &lt;script src="bower_components/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I'm very new to angularjs and I don't know the solution!! </p>
  
  <p>Thanks all</p>