title: Hide Angular UI Bootstrap popover when clicking outside of it
body: <p>I am trying to manually close a bootstrap popover to get it to close when I click anywhere on the <code>document</code> or <code>body</code> that isn't the popover.</p>
  
  <p>The closest thing I have found to accomplishing this is to create a directive (<a href="https://stackoverflow.com/a/25276563/2761425">found this answer</a>) but this is for a manual trigger if a variable is <em>true</em> or <em>false</em>.</p>
  
  <p>Could anyone help me figure out how to to get it to close if I click on anything that isn't the popover?</p>
  
  <p>I don't mind using jQuery <code>$(document).click(function(e){});</code> I just have no clue how to call a close.</p>
  
  <pre><code>&lt;div id="new_button" popover-template="plusButtonURL" popover-placement="right" popover-append-to-body="true" popover-animation="false"&gt;+&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>Normally <code>popover-trigger="focus"</code> would do the trick, however my popover contains content that needs to be clicked on. I have an <code>ng-click</code> inside my popover that get's ignored if I use the <em>focus</em> trigger so I am looking for a not-so-conventional way to get around that.</p>