AngularJS / AngularUI popover with templateURL. Uses the dialog service to style and position a dialog with bootstrap's popover css.

controllers.js

app.controller('AppCtrl', ['$scope', '$dialog', function ($scope, $dialog) {
    $scope.popover = function($event) {
       var opts = {
          backdrop: true,
          // Style as a popover, bottom position
          // additional show class to override popover class display:none
          dialogClass: 'popover bottom show' 
          templateUrl: 'partials/popover.html',
          controller: 'PopCtrl',
          // Resolve the click event coordinates
          resolve: {
                     posX: function () {
                        return angular.copy($event.x)
                     },
                     posY: function () {
                        return angular.copy($event.y)
                     }

                   }
        };
        var d = $dialog.dialog(opts);
        d.open().then(function(result) {
           if (result) {
              console.log("Popover closed with "+result)
              });
           }
        });
}]);

app.controller('PopCtrl', ['posX', 'posY', 'dialog',  function  posX, posY, dialog ) {
      $scope.posX = posX;
      $scope.posY = posY;
      $scope.close = function () {
         dialog.close();
      };

   }])

popover.css

popover.show {
  display: block;
}

popover.html

<div ng-style="{position: 'fixed', top: posY  + 'px', left: posX + 'px'}">
   <div class="arrow"></div>
   <h4 class="popover-title">Alarms</h4>
   <div class="popover-content">
      <p>I'm in a popover!</p>  
   </div>
</div>