SOURCE

var app = angular.module("angularDirectiveModule", []);
app.filter('getName', function() {
  return function(names) {
    var nameString = "";
    for (var i = 0; i < names.length; i++) {
      nameString += names[i].name + ',';
    }
    return nameString;
  }
});
app.controller("angularDirectiveController", ['$scope', function($scope) {
  $scope.data = [{
    "name": "上海",
    "citys": [{
      "name": "长宁",
      "counties": [{
        "name": "长宁"
      }]
    },
    {
      "name": "浦东",
      "counties": [{
        "name": "浦东"
      }]
    },
    {
      "name": "静安",
      "counties": [{
        "name": "静安"
      },
      {
        "name": "静安1"
      }]
    }]
  },
  {
    "name": "上海",
    "citys": [{
      "name": "长宁",
      "counties": [{
        "name": "长宁"
      }]
    },
    {
      "name": "浦东",
      "counties": [{
        "name": "浦东"
      }]
    },
    {
      "name": "静安",
      "counties": [{
        "name": "静安"
      },
      {
        "name": "静安1"
      }]
    }]
  },
  {
    "name": "上海",
    "citys": [{
      "name": "长宁",
      "counties": [{
        "name": "长宁"
      },
      {
        "name": "长宁2"
      }]
    },
    {
      "name": "浦东",
      "counties": [{
        "name": "浦东"
      }]
    },
    {
      "name": "静安",
      "counties": [{
        "name": "静安"
      },
      {
        "name": "静安1"
      }]
    }]
  }];
}]);

<div ng-app="angularDirectiveModule" ng-controller="angularDirectiveController">
  <table>
    <tr ng-repeat="p in data">
      <td>
        {{p.name}}
      </td>
      <td>
        <table>
          <tr ng-repeat="c in p.citys">
            <td>
              {{c.name}}
            </td>
          </tr>
        </table>
      </td>
      <td>
        <table>
          <tr ng-repeat="c in p.citys">
            <td>
              {{c.counties | getName}}
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

table,
tr,
td {
  border: 1px solid black;
}