Angularjs With Bootstrap Tooltip

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<div ng-app="myApp" class="main">
    <a class="pop-over" data-original-title="Bitte warten...">
        test link
    </a>
</div>

<div ng-app="myApp1" class="main">
    <a class="pop-over" data-original-title="Bitte warten..11111.">
        test link
    </a>
</div>

CSS

.main {
    padding: 30px 0 0 30px;
}

JavaScript

var app =  angular.module("myApp","myApp1", [])
app.directive('popOver', function($http) {
  return {
    restrict: 'C',
    link: function(scope, element, attr) {
        var i = 0;

        element.tooltip();                
        element.bind('mouseover',function(e) {
            
           $http.get("test").success(function(data) {
                  attr.$set('originalTitle', "Some text "+i++);  
                  element.tooltip('show');   
            });
        });
    }
}
});