AngularJS：带有ng-repeat和多个控制器的指令

Question

我正在构建一个具有一系列聊天窗口的应用程序 - 每个窗口都有自己的控制器，聊天窗口使用ng-repeat设置：

    <div ng-repeat="(id, room) in rooms">
        <div ng-controller="ChatController" ng-init="init(room)" ng-include="'partials/chat-room.html'"></div>
    </div>

现在我希望能够拖放聊天窗口。我已经创建了一个指令：

myApp.directive('draggableRoom', function ($document) {
var d = {
    restrict: 'A',
    lastClientX: 0,
    dragging: false,
    elm: null,
    _scope: null,

}
d.link = function (scope, elm, attrs) {

    d._scope = scope;
    d.elm = elm;

    elm.mousedown((function (e) {
        d._scope.startDrag();
        d.dragging = true;
        d.lastClientX = e.clientX;
    }).bind(this));

    $document.mousemove((function (e) {
        if(d.dragging) {

            // Modify the chat's offset
            d._scope.room.offset += d.lastClientX - e.clientX;
            d.lastClientX = e.clientX;

            // Notify the controller
            d._scope.wasDragged();

            // Apply the change
            d._scope.$apply();
        }
    }).bind(this));

    $document.mouseup((function (e) {
        d._scope.stopDrag();
        d.dragging = false;
    }).bind(this));
}
return d;
});

然后在聊天室部分中使用该指令：

<div class="cc-chat-box-outer" ng-style="{'right': room.offset}" draggable-room>

这样可行，但问题是它只能在最后一个聊天室的范围内运行。有没有办法让它每次都创建一个新的指令 - 每个控制器一个。或者是否有另一种方法。