fix(tooltip): Transcludes contents to allow dynamic selector text

src/tooltip/docs/demo.html

@@ -1,19 +1,20 @@
-<div ng-controller="TooltipDemoCtrl">
-  <div class="well">
-    <div>Dynamic Tooltip Text: <input ng-model="dynamicTooltip"></input></div>
-    <p>
-      Pellentesque <a><span tooltip="{{dynamicTooltip}}">dynamic</span></a>,
-      sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
-      aliquam. Tincidunt lobortis feugiat vivamus at 
-      <a><span tooltip-placement="left" tooltip="On the Left!">left</span></a> eget
-      arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
-      <a><span tooltip-placement="right" tooltip="On the Right!">right</span></a> 
-      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas 
-      <a><span tooltip-placement="bottom" tooltip="On the Bottom!">bottom</span></a> 
-      pharetra convallis posuere morbi leo urna, 
-      <a><span tooltip-animation="true" tooltip="I fade in and out!">fading</span></a> 
-      at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus 
-      turpis massa tincidunt dui ut.
-    </p>
-  </div>
-</div>
+<div ng-controller="TooltipDemoCtrl">
+  <div class="well">
+    <div>Dynamic Tooltip Text: <input ng-model="dynamicTooltipText"></input></div>
+    <div>Dynamic Tooltip Popup Text: <input ng-model="dynamicTooltip"></input></div>
+    <p>
+      Pellentesque <a><span tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</span></a>,
+      sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
+      aliquam. Tincidunt lobortis feugiat vivamus at 
+      <a><span tooltip-placement="left" tooltip="On the Left!">left</span></a> eget
+      arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
+      <a><span tooltip-placement="right" tooltip="On the Right!">right</span></a> 
+      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas 
+      <a><span tooltip-placement="bottom" tooltip="On the Bottom!">bottom</span></a> 
+      pharetra convallis posuere morbi leo urna, 
+      <a><span tooltip-animation="true" tooltip="I fade in and out!">fading</span></a> 
+      at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus 
+      turpis massa tincidunt dui ut.
+    </p>
+  </div>
+</div>

src/tooltip/docs/demo.js

@@ -1,3 +1,4 @@
-var TooltipDemoCtrl = function ($scope) {
-  $scope.dynamicTooltip = "Hello, World!";
-};
+var TooltipDemoCtrl = function ($scope) {
+  $scope.dynamicTooltip = "Hello, World!";
+  $scope.dynamicTooltipText = "dynamic";
+};

src/tooltip/test/tooltipSpec.js

@@ -60,6 +60,35 @@ describe('tooltip', function() {
     expect( elmScope.placement ).toBe( "bottom" );
   }));
 
+  it('should work inside an ngRepeat', inject( function( $compile ) {
+
+    elm = $compile( angular.element( 
+      '<ul>'+
+        '<li ng-repeat="item in items">'+
+          '<span id="selector" tooltip="{{item.tooltip}}">{{item.name}}</span>'+
+        '</li>'+
+      '</ul>'
+    ) )( scope );
+
+    scope.items = [
+      { name: "One", tooltip: "First Tooltip" }
+    ];
+
+    scope.$digest();
+
+    var tt = angular.element( elm.find("li > span")[0] );
+
+    tt.trigger( 'mouseenter' );
+
+    // Due to the transclusion, the contents of the element are in a span, so
+    // we select the tooltip's child and ensure its content matches.
+    expect( tt.children().text() ).toBe( scope.items[0].name );
+
+    // And the tooltip text should still match.
+    expect( tt.scope().tooltipTitle ).toBe( scope.items[0].tooltip );
+
+    tt.trigger( 'mouseleave' );
+  }));
 });
 
 

src/tooltip/tooltip.js

@@ -17,7 +17,13 @@ angular.module( 'ui.bootstrap.tooltip', [] )
     '<tooltip-popup></tooltip-popup>';
 
   return {
+    transclude: true,
     scope: { tooltipTitle: '@tooltip', placement: '@tooltipPlacement', animation: '&tooltipAnimation' },
+    controller: ['$transclude', '$element', function($transclude, $element) {
+      $transclude(function(clone) {
+        $element.append(clone);
+      });
+    }],
     link: function ( scope, element, attr ) {
       var tooltip = $compile( template )( scope ), 
           transitionTimeout;