First of all, if you want the popover to close on any click, not only the one outside of your popover, you can do it using existing UI-Bootstrap code:

<button class=btn btn-default btn-xs type=button

        popover-template=level.changeLevelTemplate

        popover-trigger=focus

        popover-placement=right>

  <span class=glyphicon glyphicon-sort></span>

</button>

The trick here is to drop the surrounding <div> and put the popover-trigger=focus right on the button.

If you need to actually close the popover only for clicks outside the popover content, then it will be more difficult. You need a new directive, like this one:

app.directive('clickOutside', function ($parse, $timeout) {

  return {

    link: function (scope, element, attrs) {

      function handler(event) {

        if(!$(event.target).closest(element).length) {

          scope.$apply(function () {

            $parse(attrs.clickOutside)(scope);

          });

        }

      }



      $timeout(function () {

        // Timeout is to prevent the click handler from immediately

        // firing upon opening the popover.

        $(document).on(click, handler);

      });

      scope.$on($destroy, function () {

        $(document).off(click, handler);

      });

    }

  }

});

Then, in your popover template, use the directive on the outermost element:

<div click-outside=level.closePopover()>

   ... (actual popover content goes here)

</div>

Finally, in your controller, implement the closePopover function:

vm.closePopover = function () {

  vm.togglePopover = false;

};

What we've done here is:

• we're listening on any clicks on the document, and, if the click is outside of the element to which we added our close-popover directive:
  
  
  
  
  • we invoke whatever code was the value of close-popover
  
  


• we also clean up after ourselves when the directive's scope is destroyed (i.e. when the popover is closed) so that we don't handle the clicks anymore.

It's not the cleanest solution, as you have to invoke the controller method from within the popover template, but it's the best I came up with.