title: I cannot dynamically hide UI Bootstrap's popover directive in a custom directive [AngularJS]
body: <p>I am creating a custom AngularJS directive that will enable users to select a range of text and add a comment/annotation to that selection of text, similar to <a href="http://annotatorjs.org/" rel="nofollow noreferrer">Annotator</a>.</p>
  
  <p>In my directive's <code>link</code> function, there are two event handlers. The first (below) fires when the user clicks on the custom directive. I am using UI Bootstrap's <a href="https://angular-ui.github.io/bootstrap/#!#popover" rel="nofollow noreferrer">Popover</a> directive and adding it to my span element to display a popover.</p>
  
  <pre><code>element.on('click', function () {
      if (!isPopoverActive) {
          selectedRangeId = generateRandomString(10);
  
          // wrap the selected range in a span element and 
          // give it a generated random ID
          highlightElement(selectedRangeId);
  
          if (elementExists(selectedRangeId)) {
              highlightedElement = getElementById(selectedRangeId);
  
              // Add UI Bootstrap's popover directive attributes to the element
              highlightedElement.attr('uib-popover-template', "'directives/my.directive/my.directive.tpl.html'");
              highlightedElement.attr('popover-is-open', true);
              highlightedElement.attr('popover-placement', 'right');
              highlightedElement.attr('popover-trigger', 'manual');
              highlightedElement.attr('popover-title', 'Comment');
  
              $compile(highlightedElement)(scope);
  
              isPopoverActive = true;
          }
      }
  });
  </code></pre>
  
  <p>The second (below) fires on a <code>mouseup</code> event anywhere on the current page. If the clicked element is outside of the popover I want to hide the popover again but this does not work. Inspecting the element in my browser finds that the <code>popover-is-open</code> attribute value changes on the <code>span</code> but nothing is happening on the page.</p>
  
  <pre><code>$document.on('mouseup', function (event) {
      var clickedElement = event.toElement;
  
      if (isPopoverActive &amp;&amp; clickedElement.id !== selectedRangeId &amp;&amp; !isDescendant('popover', clickedElement.id)) {
          highlightedElement.attr('popover-is-open', false);
          $compile(highlightedElement)(scope);
      }
  });
  </code></pre>