在AngularJS Boostrap

Question

AngularJS的新手，并有一个Chat App项目，需要使用AngularFire / uiBootstrap。我需要生成一个模态来创建一个新的聊天室。不知道我的错误在哪里，但我的modal.open()函数只是复制视图（home.html模板）而不是渲染模态。

我的home.html视图已通过ui-router的index.html

插入ui-view

我使用状态提供程序的app.js文件并在那里设置home.html的控制器

我将包含我的模板和控制器。

home.html的：

<h1>Bloc Chat</h1>
<ul>
  <li ng-repeat="chat in home.chatRooms">{{ chat.$value }}</li>
</ul>
<button class="btn btn-warning" type="button" ng-click="home.open()">New 
room</button>

MODAL.HTML文件：

<div class="my-modal ng-scope" id="my-modal">
<!-- <div class="my-modal" id="my-modal" controller="ModalInstanceCtrl"> -->
      <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>
</div>

HOMECTRL.JS

(function() {
  function HomeCtrl(Room, $scope, $uibModal, $log, $document) {
    var home = this;

    this.chatRooms = Room.all;
    //TO TEST ADD METHOD FROM ROOM.JS
    // this.addRoom = Room.add();

    this.open = function () {
      var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: '/app/templates/modal.html',
        controller: 'ModalInstanceCtrl',
        controllerAs: 'modal',
        bindToContoller: true,
        size: 'sm'
      });
    }

  };

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

MODALCTRL.JS

(function() {
  function ModalInstanceCtrl(Room, home, $scope, $uibModalInstance, $log, $document) {

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

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

  }

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