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">
		<button type="button" class="btn btn-default" title="Add" ng-click="vm.add()"><span class="glyphicon glyphicon-plus"></span></button>
  </div>
</div>

JavaScript

angular.module( 'app', [ 'ui.bootstrap' ] )
	.config( function( $uibTooltipProvider ) {
		$uibTooltipProvider.options( {
			placement: 'auto top'
		} );
	} )
	.controller( 'ButtonController', function() {
		var vm = this;
		vm.add = function() {
			console.log( 'Added!' );
		}
	} );

angular.module( 'ui.bootstrap.tooltip' )
	.directive( 'title', function( $compile ) {
		return {
			restrict: 'A',
			link: function( scope, elem, attrs ) {
				attrs.$set( 'uibTooltip', attrs.title );
				$compile( elem.removeAttr( 'title' ) )( scope );
			}
		};
	} );