angularjs same directive (outside click) for multiple elements <p>So I have 2 elements with the same directive: (coffeescript)</p> <pre><code>myApp.directive "clickOutside", ["$document", ($document) -&gt; restrict: "A" link: (scope, elem, attr, ctrl) -&gt; elem.bind "click", (e) -&gt; e.stopPropagation() $document.bind "click", -&gt; scope.$apply attr.clickOutside ] </code></pre> <p>and the HTML:</p> <pre><code>&lt;div class="filter-box" click-outside="showFilterList=false"&gt; &lt;div class="filter-title" ng-click="showFilterList=!showFilterList;"&gt;Open&lt;/div&gt; &lt;ul class="filter-list" ng-class="{show:datePickerModel.showFilterList}"&gt; &lt;li&gt;&lt;/li&gt; ... ... &lt;/ul&gt; &lt;/div&gt; &lt;div class="filter-box" click-outside="showFilterList=false"&gt; &lt;div class="filter-title" ng-click="showFilterList=!showFilterList;"&gt;Open&lt;/div&gt; &lt;ul class="filter-list" ng-class="{show:datePickerModel.showFilterList}"&gt; &lt;li&gt;&lt;/li&gt; ... ... &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I have 2 DIV's that click on the filter-title will change the showFilterList to true and by that the filter-list gets the 'show' class. clicking outside the element will set the showFilterList to false and filter-list is hidden again. Everything is working fine expect for one scenario: clicking on the first element filter-title and show the filter-list. clicking on the second element filter-title will show itself filter-list but won't set to false the first element that was already clicked.</p> <p>How can I do it so each directive will have it's own scope when triggered?</p> <p>Thanks!</p>