title: AngularJS Bootstrap Modal $modalInstance.dismiss is not a function
body: <p>When I click the <strong>cancel</strong> button on my modal, the $modalInstance.dismiss function binded with ng-click on my modal template isn't working.</p>
  
  <p>The console has been throwing the error: "$modalInstance.dismiss is not a function"</p>
  
  <p>MODAL TEMPLATE:</p>
  
  <pre><code>&lt;div class="my-modal ng-scope" id="my-modal"&gt;
    &lt;div class="modal-header"&gt;
      &lt;h3 class="modal-title" id="modal-title"&gt;Create a new room&lt;/h3&gt;
    &lt;/div&gt;
  &lt;div class="modal-body" id="modal-body"&gt;
    &lt;form&gt;
      Enter a room name&lt;br&gt;
      &lt;input type="text" name="new-room-name"&gt;
    &lt;/form&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button class="btn btn-warning" type="button" ng-click="modal.cancel()"&gt;Cancel&lt;/button&gt;
      &lt;button class="btn btn-primary" type="button" ng-click="modal.save()"&gt;Create Room&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>MAIN CONTROLLER: </p>
  
  <pre><code>(function() {
    function HomeCtrl(Room, $scope, $uibModal, $log, $document) {
  var home = this;
  
  home.chatRooms = Room.all;
  //TO TEST ADD METHOD FROM ROOM.JS
  // this.addRoom = Room.add();
  
  home.open = function () {
    modalInstance = $uibModal.open({
      animation: true,
      backdrop: true,
      templateUrl: '../templates/modal.html',
      controller: 'ModalInstanceCtrl',
      controllerAs: 'modal',
      bindToContoller: true,
      scope: $scope,
      size: 'lg',
      resolve: {
        '$modalInstance': function () { return function () { return modalInstance; } }
      }
    });
  
  
  console.log(modalInstance);
  
  modalInstance.result.then(function (newChatRoom) {
    home.selected = newChatRoom;
    console.log(newChatRoom);
  }, function () {
    $log.info('Modal dismissed at: ' + new Date());
  });
    };
  }
  
    angular
      .module('blocChat')
      controller('HomeCtrl', ['Room', '$scope', '$uibModal', '$log', '$document', HomeCtrl]);
  })();
  </code></pre>
  
  <p>MODAL CONTROLLER: </p>
  
  <pre><code>(function() {
    function ModalInstanceCtrl(Room, $scope, $modalInstance, $log, $document) {
  var modal = this;
  
  this.save = function() {
    $modalInstance.close(newChatRoom);
  };
  
  this.cancel = function() {
    $modalInstance.dismiss('cancel');
  };
  
    }
  
    angular
      .module('blocChat')
      .controller('ModalInstanceCtrl', ['Room', '$scope', '$modalInstance', '$log', '$document', ModalInstanceCtrl]);
  })();
  </code></pre>
  
  <p>I've spent about 3 hours messing around with my code, looking at the AngularJS Bootstrap UI documentation, several StackOverflow threads, and other sites and have gotten no where. Any help would be appreciated.</p>