我无法在自定义指令[AngularJS]中动态隐藏UI Bootstrap的popover指令

Question

我正在创建一个自定义AngularJS指令，该指令将允许用户选择一系列文本并为该文本选择添加注释/注释，类似于Annotator。

在我的指令link函数中，有两个事件处理程序。当用户单击自定义指令时，第一个（下面）将触发。我正在使用UI Bootstrap的Popover指令并将其添加到我的span元素以显示一个popover。

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;
        }
    }
});

第二个（下方）在当前页面上的任何位置触发mouseup事件。如果单击的元素在弹出窗口之外，我想再次隐藏弹出框，但这不起作用。检查浏览器中的元素会发现popover-is-open上的span属性值发生了变化，但页面上没有发生任何事情。

$document.on('mouseup', function (event) {
    var clickedElement = event.toElement;

    if (isPopoverActive && clickedElement.id !== selectedRangeId && !isDescendant('popover', clickedElement.id)) {
        highlightedElement.attr('popover-is-open', false);
        $compile(highlightedElement)(scope);
    }
});