title: angularjs dropdown not closing when another opens
body: <p>I'm trying to create a custom directive of a dropdown . <br>
  Here is my code : <a href="https://plnkr.co/edit/YqJ6tz4fwvBRmtmzeCJr" rel="nofollow">https://plnkr.co/edit/YqJ6tz4fwvBRmtmzeCJr</a></p>
  
  <p>To close the dropdown I'm checking the click event outside of that directive element.</p>
  
  <pre><code> $document.bind('click', function() {
      scope.closeDropdown();
    });
  </code></pre>
  
  <p>But the problem with this code is when one dropdown is opened and another one is click the first one doesn't close .</p>
  
  <p>How to close the dropdown when another one is clicked ?
  One way I could do this by declaring a varible in the controller and check everytime before opening the dropdown. But in this way this directive can't be use independently .</p>
  
  <p>Any help ?</p>