javascript - スコープの変更時にディレクティブ内でテンプレートを再描画/再作成する方法は?

Question

親モデルに応じて変化する Twitter 共有ボタン ディレクティブを作成しようとしています。

app.directive('twitterShare', function() {
  return {
    restrict: 'A',
    template: "<a href=\"https://twitter.com/share\" data-count=\"none\" class=\"twitter-share-button\" data-text=\"{{text}}\" data-lang=\"pt-BR\"></a>",
    scope: {
      text: '=twitterShare'
    },
    link: function($scope, $element, $attrs, $model) {
      return $scope.$watch('text', function(value) {
         //??
      });
    }
  };
});

とディレクティブ

<div twitter-share="scopeModel"></div>

は$scope.textmy を正しく表示して$scope.scopeModelいますが、twitter はa要素を iframe に置き換えるため、要素自体が失われています。変更時に再作成/再描画するにはどうすればよいですか?ただし、iframe の再作成にはコストがかかるため、何らかのスロットルを適用します。

に変更しようとしました

app.directive('twitterShare', function($compile, $timeout) {
return {
  restrict: 'A',
  scope: {
    text: '=twitterShare'
  },
  link: function($scope, element) {
    var $element;

    $element = "<a href=\"https://twitter.com/share\" data-count=\"none\" class=\"twitter-share-button\" data-text=\"{{text}}\" data-lang=\"pt-BR\"></a>";

    $scope.$watch('text', function(value) {
      if (value != null) {
        $timeout(function() {
          element.html($compile($element)($scope));
          typeof twttr !== "undefined" && twttr !== null ? twttr.widgets.load() : void 0;
        });
      }
    });
  }
};
});

しかし、2 回目の$watch'ed モデルの変更では、{{text}}プレースホルダーは更新されません。もう 1 つの奇妙な点はscopeModel、オブジェクトが変更されるたびに$$watchersインクリメントし続けることです。