Javascript 角度材质中具有相同内容的选项卡

在使用angularjs材质时，我有两个md选项卡。这两个选项卡都包含大多数相同的DOM树结构，只有一些彼此不同的内容。我正在寻找一种不需要两次创建相同公共DOM的替代方法。有没有一种方法我可以写一次，然后在两个选项卡中都使用它。 以下是HTML代码：

<div ng-app="test" ng-controller="TestController">
  <md-content>
    <md-tabs md-dynamic-height md-border-bottom>
      <md-tab label="FIRST" md-on-select="func1()">
        <md-content class="md-padding">
          <div>
            This is a very long DOM that is same in every tab :{{counter}}
          </div>
          <br>
          <div>
            This is dynamic
            <ul>
              <li ng-repeat="elem in arr1">{{elem}}</li>
            </ul>
          </div>
        </md-content>
      </md-tab>
      <md-tab label="SECOND" md-on-select="func1()">
        <md-content class="md-padding">
          <div>
            This is a very long DOM that is same in every tab : {{counter}}
          </div>
          <br>
          <div>
            This is dynamic
            <ul>
              <li ng-repeat="elem in arr2">{{elem}}</li>
            </ul>
          </div>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

---

这个解决方案怎么样

---

对我们称之为组件！

angular.module('test', ['ngMaterial'])
  .controller('TestController', function($scope) {
    $scope.counter = 0;
    $scope.arr1 = [1, 2, 3, 4, 5];
    $scope.arr2 = [5, 6, 7, 8, 9, 10];
    $scope.func1 = function() {
      $scope.counter++;
    };
  });

<md-tab ng-repeat="n in [1,2] track by $index" label="{{ labels[$index] }}" md-on-select="func1()">
  <md-content class="md-padding">
    <div>
      This is a very long DOM that is same in every tab : {{counter}}
    </div>
    <br>
    <div>
      This is dynamic
      <ul>
        <li ng-repeat="elem in arrs[$index]">{{elem}}</li>
      </ul>
    </div>
  </md-content>
</md-tab>

$scope.labels = ['FIRST', 'SECOND']; // $index = 0, so it will take 'FIRST'