title: Dropdown Toggle with AngularJS That Closes on Click Elsewhere
body: <p>Implementing a simple dropdown directive that uses ng-show to show or hide a menu is trivial in AngularJS.  I want to also close the menu if the user clicks elsewhere in the screen after having opened the menu.  What is the simplest possible correct way to do this? I have tried using $document.bind and $document.unbind to unbind from the document afterwards, but it does not seem to work as expected, and I can't work ought how it ought to work due to questions of scoping.</p>
  
  <p>I'm aware the ui-bootstrap has a similar directive (dropdownToggle), and I've dug through the source of it, but it looks much more complicated and introduces a dependency on an older version of bootstrap.</p>
  
  <p>Here is an <a href="http://plnkr.co/edit/BfnkzitfTzehU5S1e1PM?p=preview" rel="nofollow">example plunker</a> (that does not close the menu on click elsewhere).</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html  ng-app="plunker" &gt;
    &lt;head&gt;
      &lt;link data-require="bootstrap-css@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="///netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div  ng-app="dropdown"&gt;
        &lt;div menu-status-widget&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>