Custom Popover Directives

app.js

var myApp = angular.module('myApp', []);

myApp.directive('myPopover', function($compile, $timeout) {
    var popoverLink = '<a href="#" rel="popover" class="{{cssClasses}}">{{title}}</a>';
    return {
        restrict: 'E',
        scope: true,
        compile: function(tElement, tAttributes, transclude) {
            var popoverContent = tElement.html();
            var title = tAttributes.ngTitle;
            var cssClasses = tAttributes.ngClass;
            var placement = tAttributes.ngPlacement;

            tElement.html(popoverLink);

            return function(scope, element, attributes) {
                scope.title = title;
                scope.cssClasses = cssClasses;
                element.popover({
                    html: true,
                    trigger: 'manual',
                    placement: placement,
                    title: title,
                    //content: $compile(popoverContent)(scope)
                    content: function() {
                        $timeout(function() {
                            //UI Bug??
                            $compile(popoverContent)(scope);
                        });
                        return $compile(popoverContent)(scope);
                    }
                });

                element.on('click', function() {
                    element.popover('toggle');
                });
            };
        }
    }
});

function MyCtrl($scope) {
    $scope.colors = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
}

index.html

<div ng-controller="MyCtrl">
    <my-popover ng-title="New Thing" ng-placement="bottom">
       <div ng-repeat="c in colors">
           {{c}}
       </div>       
    </my-popover>
</div>