fix(typeahead): $compile match template after adding to DOM

Author: cherbst

src/typeahead/test/typeahead.spec.js

@@ -17,6 +17,13 @@ describe('typeahead tests', function () {
         }
       };
     });
+    $compileProvider.directive('childDirective', function () {
+      return {
+          restrict: 'A',
+          require: '^parentDirective',
+          link: function(scope, element, attrs, ctrl) {}
+      };
+    });
   }));
   beforeEach(inject(function (_$rootScope_, _$compile_, _$document_, _$timeout_, $sniffer) {
     $scope = _$rootScope_;
@@ -308,6 +315,19 @@ describe('typeahead tests', function () {
       expect(findMatches(element).eq(0).find('p').text()).toEqual('0 Alaska');
     }));
 
+    it('should support directives which require controllers in custom templates for matched items', inject(function ($templateCache) {
+
+      $templateCache.put('custom.html', '<p child-directive>{{ index }} {{ match.label }}</p>');
+
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-template-url="custom.html" typeahead="state as state.name for state in states | filter:$viewValue"></div>');
+
+      element.data('$parentDirectiveController', {});
+
+      changeInputValueTo(element, 'Al');
+
+      expect(findMatches(element).eq(0).find('p').text()).toEqual('0 Alaska');
+    }));
+
     it('should throw error on invalid expression', function () {
       var prepareInvalidDir = function () {
         prepareInputEl('<div><input ng-model="result" typeahead="an invalid expression"></div>');

src/typeahead/typeahead.js

@@ -383,7 +383,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
       link:function (scope, element, attrs) {
         var tplUrl = $parse(attrs.templateUrl)(scope.$parent) || 'template/typeahead/typeahead-match.html';
         $http.get(tplUrl, {cache: $templateCache}).success(function(tplContent){
-           element.replaceWith($compile(tplContent.trim())(scope));
+            $compile(tplContent.trim())(scope, function(clonedElement){
+                element.replaceWith(clonedElement);
+            });
         });
       }
     };