Angular.js with Bootstrap Popover

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

by dandoyon

HTML

<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-twipsy.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-popover.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>
<div ng:controller="MyCtrl">
    <input ng:model="greeting" placeholder="enter your name"> 
    <ul>
        <li ng:repeat="i in ['a']">
            <a href="#" bs:popover="" class="btn danger" rel="popover" data-content="Hello!  {{greeting}}" data-original-title="With Angular" data-placement="below">hover for popover</a>   
        </li>
    </ul>
</div>

CSS

li {
    margin-top: 20px;
    text-align: center;
    list-style: none;
}

JavaScript

angular.directive('bs:popover', function(expression, compiledElement){
    return function(linkElement) {
        linkElement.popover();
    };
});

function MyCtrl(){
    
}