Q: Repeating a set of s in the same table row using AngularJS I want to create a table that, in its header, contains the names of each player for two teams in each . The scope has a variable teams which is a list of Team objects, each one having  list of Player objects as an attribute.
This is turning out to be way harder than I expected.
<table>
  <thead>
    <tr>
      <div ng-repeat="team in teams">
        <th ng-repeat="player in team.players">{[ player.name ]}</th>
        <th>Partial Score</th>
        <th>Total Score</th>
      </div>
    </tr>
  </thead>
</table>

is the easiest thing I have in mind - but this doesn't work.  can't be placed inside a  according to W3C (from what I understand), so the browser just takes the div and places it outside the table.
I've tried directives as well - but these don't help. This is an example of my directive file.
<th ng-repeat="player in team.players">{[ player.name ]}</th>
<th>Partial Score</th>
<th>Total Score</th> 

For example, if I have a <player-initials> directive with replace: 'false', the browser expels the non-<th> element out of the table. Setting replace: 'true', fixes that, but then I get an error because there's more than one root element in the directive. I can't wrap the elements in the directive with anything because that would result in invalid HTML (as above).
I've tried all combinations of element and attribute directives and replace, nothing gives me what I want. Any help?

A: You should add a method to your scope that do the logic for you.
Something like this should work:
$scope.getAllPlayers = function() {
    var players = [];
    this.teams.forEach(function(team){
        players = players.concat(team.players);
    });
    return players;
}

Then in your dom:
<table>
  <thead>
    <tr>
        <th ng-repeat="player in getAllPlayers()">{{ player.name }}</th>
        <th>Partial Score</th>
        <th>Total Score</th>
    </tr>
  </thead>
</table>

I'm not using Angular so I may be wrong, but I'm pretty sure this is the way to go. This kind of logic have to be in your controller, as simple is a nested loop.
EDIT: Referring to the comments, you could make a function that return your header cells the way you want them
$scope.getHeaderCells = function() {
    var cells = [];
    this.teams.forEach(function(team){
        cells = cells.concat(team.players.map(function(player){
            return { team: team, value: player.name };
        })).concat([
            {team: team, value: 'Partial Score'},
            {team: team, value: 'Total Score'}
        ]);
    });
    console.log(cells);
    return cells;
}

with
<th ng-repeat="cell in getHeaderCells()">{{ cell.value }}</th>

here is a fiddle

A: Created a fiddle here.
Hope this is what you are looking for, if not let me know the format that you are looking for. Your HTML should look something like below.
<table ng-repeat="team in teams">
    <tr>
       <td colspan="3"> 
            {{team.name}}
        </td>
    </tr>
    <tr>
        <td>Player Name</td> 
        <td>Partial Score</td> 
        <td>Total Score</td> 
    </tr>        
    <tr ng-repeat="player in team.players">
        <td>{{player.name}}</td> 
        <td>{{player.PScore}}</td> 
        <td>{{player.TScore}}</td> 
    </tr>
</table>


A: I figured it out using the ng-repeat-start and ng-repeat-end directives. I really didn't want to write functions to generate HTML for me, because that's why I switched to Angular in the first place.
Here's a screenshot: http://i.imgur.com/e5LBvQB.png.
This is the (stripped-down to relevant part) code just for the header, everything else is similar. The only 'hacky' part I don't like is the ng-show attributes for B and T to reverse it properly, but it works for me right now. I think I can get clean it up with directives.
<table class="table table-condensed table-striped table-hover table-responsive">
        <thead>
            <tr>
                <th ng-repeat-start="team in game.getTeams()" ng-hide="true"></th>
                    <th ng-repeat="player in team.getPlayers()" ng-class="$parent.$first && 'text-info' || 'text-danger'">
                        <u>
                            {[ player.name | truncate ]}
                        </u>
                    </th>
                    <th ng-repeat-end ng-show="$first">
                        #
                    </th>
            </tr>
        </thead>
</table>

