Popover with $compile service

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div ng-app="bootstrap" id="example" ng-init="items = ['car', 'truck', 'plane', 'bike']">
    <a href="#" id="one" class="popover-trigger" pop-over items="items", title="Mode of transport">Show Pop over</a>
</div>

CSS

#example{
    margin:40px;
}

JavaScript

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

bootstrap.controller('popoverEventController', function ($scope) {
    $scope.testMe = function() {
        var cls = 'popover-trigger'
        var objectTest = document.querySelectorAll('*[class*="' + cls + '"]');
        
        angular.element(objectTest).triggerHandler('click');
        
        }
	});
bootstrap.directive('popOver', function ($compile) {
        var itemsTemplate = "<ul class='unstyled'><li ng-repeat='item in items'>{{item}}</li></ul> <br><button type='button' ng-click=\"testMe()\" class='close' aria-hidden='true'>×</button>";
        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>",
            controller: 'popoverEventController',
            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);
                
                
                $(element).popover(options);
            },
            scope: {
                items: '=',
                title: '@'
            }
        };
    });