Bootstrap tooltip or popover for angular?

Question

What is a popover for angular with bootstrap that can render html? I tried the tooltip but wont render html.

Answer 1

Basically to render a HTML template you can use a directive.Please find below two examples of plunker links:

1. Tool tip PopOver Directive

Reference Code:

var directives = angular.module('directives', []);
directives.directive('testDirective', function($compile) {
    return {
        restrict: 'EAC',
        template: "<a id='pop-over-link' style='position: fixed; top: 100px; left: 100px;'>Show pop-over</a>" +
                  "<div id='pop-over-content' style='display:none'><button class='btn btn-primary' ng-click='testFunction()'>Ok</button></div>",
        link: function(scope, elements, attrs) {
            $("#pop-over-link").popover({
                'placement': 'top',
                'trigger': 'click',
                'html': true,
                'container': 'body',
                'content': function() {
                    return $compile($("#pop-over-content").html())(scope);
                }
            });

            scope.testFunction = function() {
                alert("it works");
                console.log("maybe");
            }

        }
    }
});

2. Tool tip PopOver with $compile

Reference Code:

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: '@'
            }
        };
    });