angularjs - ng-repeatループでFoundationツールチップを設定するには?

Question

表のセルに値を表示しようとしていて、その値の関数であるツールチップを表示しようとしています。

私のHTMLのテストブロックは次のようになります

<tr ng-repeat="btcAsk in latestAsksFromBcId | limitTo:10">
    <td>{{$index + 1}}</td>
    <td><span data-tooltip class="has-tip" title="{{btcAsk.btcValue}}">{{btcAsk.btcValue}}</span></td>
    <td running-total currIndex="{{$index}}">{{btcAsk.btcAmnt}}</td>
    <td currency-convert idrVal="{{(btcAsk.btcValue * btcAsk.btcAmnt).toFixed(2)}}"></td>
</tr>

2 番目のテーブル セル (td) では、ツールチップが表示されますが、空白です。span タグ間で同じ値が適切に表示されていても。

そこで、別のアプローチ (表の 4 番目のセルに表示) を取り、カスタム ディレクティブを作成しようと考えました。

bitcoinApp.directive("currencyConvert", function(CurrencyConversions) {
return {
    restrict: 'A',
    scope: {
        idrval: '@'
    },
    template: '<span data-tooltip class="has-tip" title="USD val">{{idrval}}</span>'
  };
});

テンプレートが挿入されますが、これにはツールチップが表示されません..タイトルにハードコードされたテキストさえ表示されません。

私のスクリプトは含まれています

<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/vendor/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/foundation.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>

また、 http://madmimi.github.io/angular-foundation/があることに気付きましたが、これが期待どおりに機能しない理由に関連しているかどうかはわかりませんか?

ありがとう。