AngularJS Bootstrap Modal $modalInstance.dismiss is not a function

When I click the cancel button on my modal, the $modalInstance.dismiss function binded with ng-click on my modal template isn't working.

The console has been throwing the error: "$modalInstance.dismiss is not a function"

MODAL TEMPLATE:

<div class="my-modal ng-scope" id="my-modal">
  <div class="modal-header">
    <h3 class="modal-title" id="modal-title">Create a new room</h3>
  </div>
<div class="modal-body" id="modal-body">
  <form>
    Enter a room name<br>
    <input type="text" name="new-room-name">
  </form>
  <div class="modal-footer">
    <button class="btn btn-warning" type="button" ng-click="modal.cancel()">Cancel</button>
    <button class="btn btn-primary" type="button" ng-click="modal.save()">Create Room</button>
  </div>
</div>

MAIN CONTROLLER:

(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]);
})();

MODAL CONTROLLER:

(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]);
})();

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.

In the version of angular ui bootstrap you're using, the reference to the modal instance is called $uibModalInstance. So try changing your controller to this:

(function() {
  function ModalInstanceCtrl(Room, $scope, $uibModalInstance, $log, $document) 
  {
    var modal = this;

    this.save = function() {
      $uibModalInstance.close(newChatRoom);
    };

    this.cancel = function() {
      $uibModalInstance.dismiss('cancel');
    };
  }

  angular
    .module('blocChat')
    .controller('ModalInstanceCtrl', ['Room', '$scope', '$uibModalInstance', '$log', '$document', ModalInstanceCtrl]);
})();