JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="CourtCtrl" ng-app>

	<h1>Bookings per court</h1>
	<table>
		<thead>
			<tr>
				<td>Name</td>
				<td>Number</td>
				<td>Nr of players</td>
				<td></td>
			</tr>
		</thead>
		<tbody>

			<tr ng-repeat="court in courts">
				
				<td>{{court.name}}</td>
				<td>{{court.number}}</td>
				<td>{{court.nrOfPlayers}}</td>
				<td>
					<a href ng:click="toggle(court.number)">Details</a>
				</td>
			</tr>

		</tbody>

	</table>

	<span ng-show="toggledCourt.playersToggledOn">
		<ul>
			<li ng-repeat="player in toggledCourt.players">
				<span class="name">{{player}}</span>
			</li>
		</ul>	
	</span>

	<span ng-show="toggledCourt.playersToggledOn && toggledCourt.players.length <= 0">
		No players
	</span>

</div>

JavaScript

var byPropertyValue = function(coll, prop, value){
	for (var i = coll.length - 1; i >= 0; i--) {
		if (coll[i][prop] === value)
			return coll[i];
	};
};

function CourtCtrl($scope) {
	
	function playersBycourt(courtid){
		for (var i = $scope.playersPerCourt.length - 1; i >= 0; i--) {
			if ($scope.playersPerCourt[i].number === courtid){
				return $scope.playersPerCourt[i].players;
			}
		};
	}

	$scope.playersPerCourt = [
		{
			"number": 1,
			"players": ["jonathan", "peter"]
		},
		{
			"number": 2,
			"players": []
		}
	];

	$scope.courts = [
		{
			"number": 1,
			"name": "the best court",
			"nrOfPlayers": 2,
			"playersToggledOn": false
		},
		{
			"number": 2,
			"name": "the bad court",
			"nrOfPlayers": 0,
			"playersToggledOn": false
		}
	];

	$scope.toggle = function(courtid){

		// fetch data
		var court = byPropertyValue($scope.courts, "number", courtid);
		court.players = playersBycourt(courtid);
		
		// hide others
		for (var i = $scope.courts.length - 1; i >= 0; i--) {
			if ($scope.courts[i].number != courtid)
				$scope.courts[i].playersToggledOn = false;
		}

		// toggle
		court.playersToggledOn = !court.playersToggledOn;
		$scope.toggledCourt = court;
	};
}