Trying to get twitter's typeahead.js to play nicely with angular js templates ... and failing.

controllers.js

module.controller('SearchCtrl', ['$scope', '$compile', '$templateCache', function ($scope, $compile, $templateCache) {
  // I figured out how to read my angular template from the $templateCache, but not
  // sure how to make it "come to life" with the scope and whatnot.
  var memberCardTpl = $templateCache.get('member-card.html');

  // I can use Hogan to compile the angular template, but none of the directives work. Hogan
  // knows nothing about Angular.
  //var resultTpl = Hogan.compile($templateCache.get('member-card.html'));
  
  // this scoped variable is set in the controller and then later
  // accessed from the typeahead directive.
  $scope.memberData = {
    name: 'members',
    template: function(data) {
      // running $compile against the template returns a DOM object, but not
      // sure what to do with this. How do I pass in my data objects to it and
      // how to I make Angular process the directives?
      var compiledTpl = $compile(memberCardTpl)($scope);
      
      // not exactly sure what to return here. I am assuming the Hogan.js compiledTemplate.render
      // method would kick in here and return html as string, with the template already processes.
      return compiledTpl;
    }
  };
}]);

directives.js

// this is a very simple directive that just initializes twitter's typeahead.js
// using the data and options we defined in our controller
module.directive('typeahead', function Typeahead($route, $location, $compile, $templateCache) {
  return {
    restrict: 'A',
    scope: {
      datasets: '='
    },
    link: function (scope, element, attr) {
      // this is where the twitter typeahead.js is initialized.
      element.typeahead(scope.datasets);
    }
  };
});

index.html

<!-- this simple input has the typeahead directive and uses the
     dataset attribute to pass along the options to our directive -->
<div id="user-search" ng-controller="SearchCtrl">
  <form>
    <fieldset>
      <div class="input">
        <input type="search" id="search-input" placeholder="Search for member" typeahead datasets="memberData">
      </div>
    </fieldset>
  </form>
</div>

member-card.html

<!-- this is the angular template that I am trying to use to display
     my typeahead results. Notice, the ng-click directives. I want those
     guys to actually DO something! Also, the {{vars}} should be filled out
     when the template is rendered, but they are not. Hmmmm -->
<script type="text/ng-template" id="member-card.html">
  <div class="media member-card">
    <div class="bd">
      <div class="info">
        <div class="name">{{name}}</div>
        <div class="company">{{info.company}}</div>
        <div class="contact">
          <span class="phone">{{info.phone}}</span>
        </div>
      </div>

      <div class="actions">
        <a href="#/notification/package" class="action" ng-click="notifyPackage()">Package</a>
        <a href="#/notification/guest" class="action" ng-click="notifyGuest()">Guest</a>
        <a href="#/notification/food" class="action" ng-click="notifyFood()">Food</a>
      </div>
    </div>
  </div>
</script>