title: Angular UI Bootstrap Popover adding a close button
body: <p>I have the following pop-up and trying to add a close button to be able to close it.</p>
  
  <pre><code>.directive("popoverHtmlUnsafePopup", function () {
    'use strict';
    return {
      restrict: "EA",
      replace: true,
      scope: { title: "@", content: "@", placement: "@", animation: "&amp;", isOpen: "&amp;", manualHide: '&amp;' },
      templateUrl: "views/popover/popover-html-unsafe-popup.html"
    };
  })
  
  .directive("popoverHtmlUnsafe", [ '$compile', '$timeout', '$parse', '$window',"$tooltip", function ($compile, $timeout, $parse, $window, $tooltip) {
    'use strict';
    return $tooltip("popoverHtmlUnsafe", "popover", "click");
  }]);
  
  &lt;div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }"&gt;
    &lt;div class="arrow"&gt;&lt;/div&gt;
  
    &lt;div class="popover-inner"&gt;
      &lt;h3 class="popover-title" ng-bind="title" ng-show="title"&gt;&lt;/h3&gt;
      &lt;div class="popover-content" bind-html-unsafe="content"&gt;
      &lt;/div&gt;
      &lt;button type="button" class="close" popover-trigger="close"&gt;&amp;times;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Just not sure what event or function to call on</p>
  
  <pre><code>&lt;button type="button" class="close" popover-trigger="close"&gt;&amp;times;&lt;/button&gt;
  </code></pre>
  
  <p>to be able to close the popup</p>