Angular.js with Bootstrap Popover

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

by marco_m_alves

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 ng-controller="MainCtrl" class="main">
    
    <div ng-controller="SubCtrl">
        <ul><li>
        <div class="link" ng-click="show()">Clicking this link should should a popover</div>
        <div id="popover-content" style="display:none;">
            <span class="btn" ng-click="hide()">Clicking this button should hide the popover</span>
        </div>
        </li></ul>
    </div> 
</div>

CSS

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

JavaScript

function MainCtrl($scope) {
    
}

function SubCtrl($scope) {
    
    var id = "#popover-content";
    
    $scope.show = function() {
      
        $(id).popover({
            trigger: "hover",
            placement: "right",
            title: "testing 1,2,3...",
        html: true,
        content: function(){ return $(id).html(); }       
        });
        
        
        $(id).popover("show");
        
        console.log("show");
    }

    $scope.hide = function() {
        $(id).popover("hide");
        console.log("hide");
    }


};

angular.module("myApp").directive('popover', function(){
  return {
    restrict: 'A',
    scope: {
      title: 'bind',
      content: 'accessor',
      position: 'bind'
    },
    link: function(scope, el, attrs){
      el.popover({
        title: scope.title,
        html: true,
        content: scope.content().html(),
        position: scope.position,
        trigger: 'manual'
      });
      
      el.click(function(){
        el.popover("show");
      });
    }
  };
});