javascript - 別のディレクティブの link() メソッド内に配置されたディレクティブがレンダリングされない

Question

私は角度を学んでおり、ディレクティブのスコープを理解したので、もっと大胆になり始めました。別のテーブルのセル内にネストされたテーブルをレンダリングしたいと考えています。この場合、両方のテーブルが異なるスコープを持つ 2 つの独立したディレクティブによって生成されます。フィドルは次のとおりです。
http://jsfiddle.net/jared_t83/Y8LjY/
問題のリンク方法は次のとおりです。

link: function($scope, element, attrs) {
  $scope.property = "scopingTest2.link() - won't overwrite parent"
  var html = element.html(),
    text = [
      'scopingtest2 - new scope, prototipically inherited from the parent',
      '<table>',
      '<tr><th>key</th><th>value</th></tr>',
      '<tr>',
      '<td>Nested table should be here: <br><div scoping-test1></div></td>',
      '</tr>',
      '<tr>',
      '<td>$scope.property</td>',
      '<td>', $scope.property, '</td>',
      '</tr><tr>',
      '<td> $scope.$parent.property </td>',
      '<td>', $scope.$parent.property, '</td>',
      '</tr><tr>',
      '<td> $scope.__proto__.property</td>',
      '<td>', $scope.__proto__.property, '</td>',
      '</tr></table><br>'
    ]
  element.html(html + text.join(''));
}

ネストされたテーブルをレンダリングする必要がある行は次のとおりです。

      '<tr>',
      '<td>Nested table should be here: <br><div scoping-test1></div></td>',
      '</tr>',

しかし、代わりにレンダリングされたテーブルには、上記のリテラルが表示されます。
私は何を間違っていますか？私が望むものを達成する方法は？お時間をいただきありがとうございます、
よろしく
Jared