Angular Bootstrap Dynamic Popover Placement

config.js

$tooltipProvider.setTriggers({
  // other trigger config
  'customOpen':'customClose'
});

popover-button-directive.js

angular.module("popover-button-module", [])
    .directive("popover-button", ["$parse", "$timeout", "$window", function($parse, $timeout, $window) {
        return {
            restrict: "A",
            link: function popoverButtonLink(scope, button, attributes) {
                var id = attributes.id;
                var position = attributes.popoverButtonPosition;
                var postClickFunction = $parse(attributes.popoverButton);
                var popoverIsOpen = false;

                if(!id) {
                    console.error("You must set an ID for the target popover button element");
                }

                button.bind("customOpen", function popoverButtonOpenHandler() {
                    popoverIsOpen = true;

                    $timeout(function adjustPopoverPosition() {
                        var popover = angular.element(".popover");
                        if(position) {
                            // Do positioning here e.g for "top-left", "bottom-right"
                        }
                        // The popup is invisible by default so that the user doesn't see the movement
                        // the above code creates.
                        popover.addClass("visible");
                    });
                });

                button.bind("customClose", function popoverButtonCloseHandler() {
                    popoverIsOpen = false;
                    angular.element(".popover").removeClass("visible");
                });

                button.bind("click", function popoverButtonClickHandler(event) {
                    if(popoverIsOpen) {
                        button.triggerHandler("customClose");
                    } else {
                        var otherButtons = angular.element("[popover-button]:not('#" + id + "')");
                        angular.forEach(otherButtons, function closeAllOtherPopovers(value) {
                            angular.element(value).triggerHandler("customClose");
                        });
                        button.triggerHandler("customOpen");
                    }

                    if(postClickFunction) {
                        postClickFunction(scope, { $event: event });
                    }
                });
            }
        };
    }]);

popover-usage.html

<button id="btn-thumbs-popover"
        popover-button="optionalPostClickFunction()"
        popover-button-position="top-left"
        popover-trigger="customOpen">Open Me</button>

style.css

.popover {
  visibility: hidden;
}

.popover.visible {
  visibility: visible;
}