Double compiling
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.4/ui-bootstrap-tpls.js"></script>
<div class="container"
ng-app="app">
<div ng-controller="ButtonController as vm">
<p>Repetition in button:</p>
<button type="button" class="btn btn-default" title="Add" ng-click="vm.add()"
ng-repeat="btn in vm.buttons"><span class="glyphicon glyphicon-plus"></span></button>
<hr>
<p>Repetition in button's parent:</p>
<ul>
<li ng-repeat="btn in vm.buttons"><button type="button" class="btn btn-default" title="Add" ng-click="vm.add()"><span class="glyphicon glyphicon-plus"></span></button></li>
</ul>
</div>
</div>
JavaScript
angular.module( 'app', [ 'ui.bootstrap' ] )
.config( function( $uibTooltipProvider ) {
$uibTooltipProvider.options( {
placement: 'auto bottom'
} );
} )
.controller( 'ButtonController', function() {
var vm = this;
vm.buttons = [ 0, 1, 2 ];
vm.add = function() {
console.log( 'Added!' );
};
} );
angular.module( 'ui.bootstrap.tooltip' )
.directive( 'title', function( $compile ) {
return {
restrict: 'A',
priority: 2000,
terminal: true,
compile: function( elem, attrs ) {
attrs.$set( 'uibTooltip', attrs.title );
var compiled = $compile( elem.removeAttr( 'title' ) );
return function( scope ) {
compiled( scope );
};
}
};
} );