Bootstrap tooltip not rendering with angular ng-repeat

It happens because angularjs adds / removes elements on the fly with ng-repeat (data-binding).

To circumvent this, you need to create a directive so that whenever the new element is created, the tooltip is properly initiated.

First, you need to create the following directive:

app.directive('bsTooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).hover(function(){
                // on mouseenter
                $(element).tooltip('show');
            }, function(){
                // on mouseleave
                $(element).tooltip('hide');
            });
        }
    };
});

Then include the "tooltip" attribute on the element you want the tooltip to appear on:

<a href="" title="My Tooltip!" bs-tooltip>My Tooltip Link</a>

Source: Using Bootstrap Tooltip with AngularJS

See my answer here.

Source-code: here.

The idea is to use a directive:

angular.module('myApp', ['ui.bootstrap']).directive('tooltipLoader', function() {
    return function(scope, element, attrs) {

      element.tooltip({
        trigger:"hover",
        placement: "top",
        delay: {show: 1000, hide: 0}
      });

    };
  });