单击链接后重置div

Question

我有三个链接：

<h3><a href="" ng-click="setActive('housePointz')">Click here to give unitz to House</a></h3>
<h3><a href="" ng-click="setActive('memberPointz')">Click here to give unitz to House Member</a></h3>
<h3><a href="" ng-click="setActive('editTable')">Click here to edit unitz table</a></h3>

我想在每个链接点击上显示不同的数据。对于隐藏在页面内的前两个链接数据。但是对于第三个我想从另一个php页面加载数据。

显示活动链接的代码：

unity.controller("index", ['$scope', '$http', '$timeout', '$compile', function($scope, $http, $timeout, $compile){
  $scope.setActive = function (name) { 
    $scope.thing = name; 
    if($scope.thing == 'editTable'){
      var compiledeHTML = $compile("<div my-Customer></div>")($scope);
      $("#d").append(compiledeHTML);        
    }else{ $("#d").append(''); }

  } //display active link
  $scope.isActive = function (name) { return ($scope.thing == name); } // Returns false if thing is different.
}])  .directive('myCustomer', function() {
    return {
      templateUrl: 'House/unt_table.php'
    };
  });

和unt_table.php页面：

<p>Test data</p>

除了一个问题外它工作正常。每次我点击链接时，它都会重复数据而不是覆盖它：

每次点击链接时如何覆盖显示的数据？