将对象传递给Angular的控制器时遇到麻烦

Question

我试图将模型传递给AngularUI的Bootstrap模式。这是初始控制器：

angular.module('maboard').directive('tilesList', function () {
  return {
    restrict: 'E',
    templateUrl: 'client/tiles/tiles-list/tiles-list.html',
    controllerAs: 'tilesList',
    controller: function ($scope, $reactive, $modal) {
      $reactive(this).attach($scope);

      this.editTile = (tile = {}) => {
        $modal.open({
          animation: true,
          template: '<tile-detail-modal></tile-detail-modal>',
          resolve: {
            tile: () => { return tile }
          }
        });
      };
    }
  }
});

和模态的控制器和指令：

angular.module('maboard').controller('tileDetailModalCtrl', [ '$scope', '$modalInstance', 'tile', function($scope, $modalInstance, tile) {
    console.debug(tile);
  }
]);

angular.module('maboard').directive('tileDetailModal', function () {
  return {
    restrict: 'E',
    templateUrl: 'client/tile-detail-modal/tile-detail-modal.html',
    controller: 'tileDetailModalCtrl'
  }
});

所以我想将tile对象传递给我可以编辑它的模态，但我只得到了这个错误：

Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- tileDetailModalCtrl <- tileDetailModalCtrl

我看到了大约20个解决方案，其中作者建议编写这样的控制器，但它仍然无法工作。