angularjs - 複数の要素に対するangularjsの同じディレクティブ（外側のクリック）

Question

したがって、同じディレクティブを持つ 2 つの要素があります: (coffeescript)

myApp.directive "clickOutside", ["$document", ($document) ->
    restrict: "A"
    link: (scope, elem, attr, ctrl) ->
        elem.bind "click", (e) ->
            e.stopPropagation()
        $document.bind "click", ->
            scope.$apply attr.clickOutside
]

そしてHTML：

<div class="filter-box" click-outside="showFilterList=false">
    <div class="filter-title" ng-click="showFilterList=!showFilterList;">Open</div>
    <ul class="filter-list" ng-class="{show:datePickerModel.showFilterList}">
        <li></li>
        ...
        ...
    </ul>
</div>

<div class="filter-box" click-outside="showFilterList=false">
    <div class="filter-title" ng-click="showFilterList=!showFilterList;">Open</div>
    <ul class="filter-list" ng-class="{show:datePickerModel.showFilterList}">
        <li></li>
        ...
        ...
    </ul>
</div>

filter-title をクリックすると showFilterList が true に変更され、それによって filter-list が「show」クラスを取得する 2 つの DIV があります。要素の外側をクリックすると、showFilterList が false に設定され、filter-list が再び非表示になります。最初の要素 filter-title をクリックして filter-list を表示するという 1 つのシナリオを期待して、すべてが正常に機能しています。2 番目の要素 filter-title をクリックすると、それ自体が filter-list に表示されますが、既にクリックされた最初の要素は false に設定されません。

トリガーされたときに各ディレクティブが独自のスコープを持つようにするにはどうすればよいですか?

ありがとう！