title: angularjs same directive (outside click) for multiple elements
body: <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>