title: How to close Angular-bootstrap popover when clicking outside
body: <p>I am attempting to close my Angular-bootstrap <code>popover</code>s when clicking anywhere outside the popovers. According to an answer to this question this can now be accomplished (in version 0.13.4) by utilizing the new <code>popover-is-open</code> attribute: <a href="https://stackoverflow.com/questions/30512748/hide-angular-ui-bootstrap-popover-when-clicking-outside-of-it">Hide Angular UI Bootstrap popover when clicking outside of it</a></p>
  
  <p>Currently my HTML looks like so:</p>
  
  <pre><code>&lt;div
    ng-click="level.openTogglePopover()"
    popover-template="level.changeLevelTemplate"
    popover-trigger="none"
    popover-placement="right"
    popover-is-open="level.togglePopover"&gt;
    &lt;button class="btn btn-default btn-xs" type="button"&gt;
      &lt;span class="glyphicon glyphicon-sort"&gt;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...and my relevant controller code:</p>
  
  <pre><code>vm.togglePopover = false;
  
  vm.openTogglePopover = function() {
    vm.togglePopover = !vm.togglePopover;
  };
  </code></pre>
  
  <p>This works great for opening/closing the popover when clicking on the button referenced above. My question is, how would I extend this functionality to close the popover when clicking anywhere outside of the popover? How would I set up my event handling to accomplish this?</p>