使用 outsideClick 关闭自定义指令弹出框

问：

我有一个弹出窗口作为自定义指令，当单击或悬停图标时会打开。单击该图标时，弹出框会粘住，如果再次单击该图标，弹出框将关闭。现在我想在单击弹出框以外的其他任何地方单击弹出框后关闭弹出框。下面是我的代码...

我的自定义指令

(function () {
  'use strict';

  angular.module('frontend.core.directives')
    .directive('myPopover', [
      function directive() {
        return {
          restrict: 'E',
          templateUrl: '/frontend/core/directives/my-popover/my-popover.html',
          scope: {
            trigger: '@',
            title:'@'
          },
          transclude: true,
          link: function (scope, elm, attrs) {
            //Need to hide content first
            elm.hide();
            //plugin binder
            $(scope.trigger).popover({
              html: true,
              trigger: 'hover click',
              placement: 'auto',
              content: function () {
                return elm.html();
              },
              title: function () {
                return scope.title;
              }
            });

          }
        };
      }
    ]);
}());

我的 HTML

<div>
<i id="touch-details" class="fa fa-info-circle"></i>
<my-popover trigger="#touch-details" my-popover-trigger="outsideClick" title="Details">
    <span>
       Inside of my popover
    </span>
</my-popover>
</div>

请告诉我在单击外部时需要做什么才能关闭弹出框。