Child rows not displaying correctly in AngularJS

Question

I see an issue when I am trying to add child rows in AngularJS. I have child rows and they are printing in the <pre> tags but not in the child rows.

<table class="table table-hover">
    <thead>
        <tr>
            <th>Team Name</th>
            <th>City</th>
            <th>State</th>
        </tr>
    </thead>
    <tbody>
        <!-- Teams Section -->
        <tr ng-repeat="(teamId, group) in groupedFlights">
            <td>
                <button class="btn btn-link" ng-click="toggleFlights(teamId)">
                    <span ng-if="!expandedTeams[teamId]">&#9654;</span>
                    <span ng-if="expandedTeams[teamId]">&#9660;</span>
                </button>
                {{ group.team.name }}
            </td>
            <td>{{ group.team.city }}</td>
            <td>{{ group.team.stateProvince }}</td>
            <td>Flights: {{group.flights|json}}</td>
        </tr>

        <!-- Flights Section -->
        <tr ng-if="expandedTeams[teamId]" ng-repeat="flight in flights[teamId]">
            <td style="padding-left: 40px;">
                <b>Flight #:</b> {{ flight.flightNumber }}
            </td>
            <td>
                <b>Departure:</b> {{ flight.departureCity }} at {{ flight.departureTime }}
            </td>
            <td>
                <b>Arrival:</b> {{ flight.arrivalCity }} at {{ flight.arrivalTime }}
            </td>
        </tr>

        <!-- No Flights Message -->
        <tr ng-if="expandedTeams[teamId] && (!flights[teamId] || flights[teamId].length === 0)">
            <td colspan="3" style="padding-left: 40px;">
                No flights available for this team.
            </td>
        </tr>
    </tbody>
</table>

$scope.expandedTeams = {}; // Tracks expanded states by team ID
$scope.flights = {}; // Cache flights by team ID

$scope.toggleFlights = function (teamId) {
    // Toggle expanded state
    if ($scope.expandedTeams[teamId]) {
        $scope.expandedTeams[teamId] = false; // Collapse
    } else {
        $scope.expandedTeams[teamId] = true; // Expand
        // Fetch flights dynamically if not already cached
        if (!$scope.flights[teamId]) {
            const group = $scope.groupedFlights.find(g => g.team.id === teamId);
            $scope.flights[teamId] = group ? group.flights : [];
        }
    }
};

Somehow there is an issue with the nested ng-repeat in AngularJS. I am getting flights in this:

<td>Flights: {{group.flights|json}}</td>

...but not in this:

<tr ng-if="expandedTeams\[teamId\]" ng-repeat="flight in flights\[teamId\]"\>

I have flights under teams and teams is populating but when I click on the teams I am not getting flights.