AngularJS & Bootstrap tooltips

Bootstrap tooltips in AngularJS ng-repeat

by murgiaMarco

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div ng-controller="appController">

    <h1>This is: {{title}}</h1>

    <button style="display: block; width: 80px"data-ng-repeat="name in names track by $index" data-toggle="tooltip" title="This is a tooltip" app-tooltip>{{name}}</button>

</div>

JavaScript

var app = angular.module('app', [])
       .controller('appController', appController)
       .directive('appTooltip', appTooltip);

   appController.$inject = ['$scope', '$window'];

   function appController($scope, $window) {
       $scope.title = "bootstrap tooltips with angular";
       $scope.names = ['Lisa', 'Bart', 'Homer', 'Marge', 'Maggie'];
   };

   function appTooltip() {
       return function(scope, element) {
           element.tooltip();
       };
   }