Bootstrap Popover with $compile service using Angular

by Keyur Patel

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div ng-app="bootstrap" id="example" ng-init="items = ['car', 'truck', 'plane', 'bike']">
    <a href="#" pop-over items="items", title="Mode of transport <button id='xid'> X </button>">Show Pop over</a>
</div>

CSS

#example{
    margin:40px;
}

JavaScript

var bootstrap = angular.module("bootstrap", []);

bootstrap.directive('popOver', function ($compile) {
        var itemsTemplate = "<ul class='unstyled'><li ng-repeat='item in items'>{{item}}</li></ul>";
        var getTemplate = function (contentType) {
            var template = '';
            switch (contentType) {
                case 'items':
                    template = itemsTemplate;
                    break;
            }
            return template;
        }
        return {
            restrict: "A",
            transclude: true,
            template: "<span ng-transclude></span>",
            link: function (scope, element, attrs) {
                
                
                var popOverContent;
                if (scope.items) {
                    var html = getTemplate("items");
                    popOverContent = $compile(html)(scope);                    
                }
                var options = {
                    content: popOverContent,
                    placement: "bottom",
                    html: true,
                    title: scope.title
                };
                $(element).popover(options);
            },
            scope: {
                items: '=',
                title: '@'
            }
        };
    });