Angular.js with Bootstrap Popover

An attempt to use Boostrap's Popover.js with Angular.js

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<script src="http://code.angularjs.org/1.0.0rc8/angular-1.0.0rc8.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl" class="main">
    
    <div ng-controller="SubCtrl">
        <span class="link" popover title="Testing" position="bottom" content="content">
            Clicking this link should should a popover
        </span>
        <div id="popover-content" style="display:none;">
            <span class="btn" ng-click="console.log('hide');" ng-mouseon="hovering=true" ng-mouseoff="hovering=false" ng-class="{link: hovering}">
                Clicking this button should hide the popover
            </span>
        </div>
        
    </div> 
</div>

CSS

.main { position: absolute; top: 10%; bottom: 20%; right: 20%; left: 20%; }
.link { color: blue; cursor: pointer; }
.link:hover { text-decoration: underline; }

JavaScript

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

app.controller("MainCtrl", function($scope) {

});

app.controller("SubCtrl", function($scope) {

    var id = "#popover-content";

    $scope.content = id;


});

app.directive('popover', function() {
    return {
        restrict: 'A',
        scope: {
            title: 'bind',
            content: 'accessor',
            position: 'bind'
        },
        link: function(scope, el, attrs) {
            var popoverEl;
            
            el.popover({
                title: scope.title,
                html: true,
                content: $(scope.content()).html(),
                position: scope.position,
                trigger: 'manual'
            });
            
            el.click(function() {
                el.popover('show')
                
                //The popover el isn't created until now
                $('.btn', '.popover').bind('click', function() {
                    el.popover('hide');
                });
            });
            
            
            
        },
    };
});