AngularJS - BootStrap Popover Directive

In some cases we need to show some popover as tooltip or as dialog

Here am going to use BootStrap Popover, this plugin is part of BootStrap.js file or we can include spearately. For more information about that read here 

I am going to create simple popover

Step 1; Create your html pages, include BootStrap js files, AngularJS, JQuery basic setups

Step 2: Here is what I created directive to make PopOver work with AngularJS, add this directive to your application

var app = angular.module('appModuleName');

app.directive('popover', ['$compile',function ($compile) {

    return {

        restrict: 'A',

        link: function (scope, element, attrs) {

            $(element).popover({

                html: true,

                title:  attrs.popoverTitle || "Header",

                content: function () {

                    return $compile($("#" + attrs.popoverContent).html())(scope);

                },

                placement: attrs.popoverPlacement || "top"

            });

        }

    };

}]);

Step 3: In your HTML, just use this directive and pass attributes

<input type="button" popover popover-title="Header Text" popover-content="popover-content-id" popover-placement="top"/>

Step 4: Here you can pass your Title, ContentId, placement (Top, Bottom, Right, Left) etc.  This popover-content-id is div with contents

  <div id="popover-content-id" class="hide">

Some content here..

  </div>