title: Angular UI Bootstrap popover with close button
body: <p>I am using Angular UI Bootstrap to create a popover but I am unable to find the option to add a close button inside the popover.</p>
  
  <p>I customized the popover template to include the close button. But I am still unable to find a function/event to close the popover. Setting <em>isOpen</em> to false works for the first time as it just overwrites the function - but thereafter becomes unusable.</p>
  
  <pre><code> &lt;button popover-placement="bottom" popover="test"&gt;POPOVER WITH CLOSE&lt;button&gt;
  </code></pre>
  
  <p>Here is the template script:</p>
  
  <pre><code>angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("template/popover/popover.html",
      "&lt;div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\"&gt;\n" +
      "  &lt;div class=\"arrow\"&gt;&lt;/div&gt;\n" +
      "\n" +
      "  &lt;div class=\"popover-inner\"&gt;\n" +
      "      &lt;button ng-click=\"isOpen = !isOpen()\" class=\"btn-popover-close btn btn-primary\"&gt;Close&lt;/button&gt;\n" +
      "      &lt;h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"&gt;&lt;/h3&gt;\n" +
      "      &lt;div class=\"popover-content\" ng-bind=\"content\"&gt;&lt;/div&gt;\n" +
      "  &lt;/div&gt;\n" +
      "&lt;/div&gt;\n" +
      "");
  }]);
  </code></pre>
  
  <p>I thought of writing a directive for close button to trigger the 'click" event of "POPOVER WITH CLOSE" button. But I am not sure if that's the approach to follow. </p>
  
  <p>What's the correct approach to follow?</p>