Bootstrap popover

by marco_m_alves

HTML

<script src="https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js"></script>
<script src="https://github.com/twitter/bootstrap/blob/master/js/bootstrap-popover.js"></script>
<script src="http://code.angularjs.org/1.0.0rc8/angular-1.0.0rc8.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<div ng-controller="MainCrtl">
    <div ng-controller="SubCtrl">
        <span class="link" ng-click="show()">click to view popover</span>
        <div id="popover-content" style="display:none;">
            <span class="btn" ng-click="hide()">hide</span>
        </div>
    </div>
</div>

CSS

.link { color: blue; cursor: pointer; }
.link:hover { text-decoration: underline; }

JavaScript

function MainCtrl($scope){
        
    }

function SubCtrl($scope){
    $scope.show = function(){
        $("#popover-content").popover({
        trigger: "manual",
        placement: "bottom",
        title: "testing 1,2,3...",
        content: function(){
        return $("#popover-content").html();}        
        });
        
        $("#popover-content").popover("show");
    }
        
    $scope.hide = function(){
        $("#popover-content").popover("hide");
        }
        
        
};