Close an Angular JS Bootstrap popover from a button

Question

I have created a bootstrap popover with Angular JS. I have created a directive, so that any item in my app with the correct directive can open a popover showing a div inside it as specified, such as

<i class="fa fa-user" data-content-id="popover-account" bs-popover></i>

This shows the contents of the div #popover-account as the popover for this icon.

My question is that in some cases, the popover may contain a button ie "Cancel", which should close the popover. I'm not sure how to work that in. Here is the current directive:

'use strict';

angular.module('designSystemApp')
.directive('bsPopover', function() {
    return {
        //template: '<div></div>',
        restrict: 'A',
        link: function postLink(scope, element, attrs) {

            var $content = $('#' + attrs.contentId);

            element.popover({
                trigger: 'click',
                placement: 'bottom',
                html: true,
                container: 'body',
                content: function() {
                    return $content.removeClass('hidden');
                }
            });

            element.on('show.bs.popover', function() {
                $('[bs-popover]').popover('hide');
            });

            element.on('shown.bs.popover', function() {
                $('#' + attrs.contentId).find('input:first').focus();
            });

        }
    };
});

Answer 1

I would suggest using Bootstrap components written by the AngularUI Team. you can find a great set of Twitter Bootstrap components including Popover control.

Example:

html:

<div ng-controller="PopoverDemoCtrl">
    <h4>Dynamic</h4>
    <div class="form-group">
      <label>Popup Text:</label>
      <input type="text" ng-model="dynamicPopover" class="form-control">
    </div>
    <div class="form-group">
      <label>Popup Title:</label>
      <input type="text" ng-model="dynamicPopoverTitle" class="form-control">
    </div>
    <button popover="{{dynamicPopover}}" popover-title="{{dynamicPopoverTitle}}" class="btn btn-default">Dynamic Popover</button>

    <hr />
    <h4>Positional</h4>
    <button popover-placement="top" popover="On the Top!" class="btn btn-default">Top</button>
    <button popover-placement="left" popover="On the Left!" class="btn btn-default">Left</button>
    <button popover-placement="right" popover="On the Right!" class="btn btn-default">Right</button>
    <button popover-placement="bottom" popover="On the Bottom!" class="btn btn-default">Bottom</button>

    <hr />
    <h4>Triggers</h4>
    <p>
      <button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="btn btn-default">Mouseenter</button>
    </p>
    <input type="text" value="Click me!" popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="focus" class="form-control">

    <hr />
    <h4>Other</h4>
    <button Popover-animation="true" popover="I fade in and out!" class="btn btn-default">fading</button>
    <button popover="I have a title!" popover-title="The title." class="btn btn-default">title</button>
</div>

js:

var PopoverDemoCtrl = function ($scope) {
  $scope.dynamicPopover = "Hello, World!";
  $scope.dynamicPopoverTitle = "Title";
};