Displaying the keys value from a JSON array in AngularJS

Question

How do I get the league titles from the given JSON to show in [TITLE]? Everything else works just fine, but I would like for it to show up in league categories.

My HTML:

    <div ng-controller="LeaguesCtrl">
        <div ng-repeat="league in leagues">
            League:  {{[TITLE]}}
            <table>
                <tr ng-repeat="match in league">
                    <td>{{match.home_team}}</td>
                    <td>-</td>
                    <td>{{match.away_team}}</td>
                    <td><a href="#">{{match.home_odds}}</a></td>
                    <td><a href="#">{{match.draw_odds}}</a></td>
                    <td><a href="#">{{match.away_odds}}</a></td>
                </tr>
            </table>
            <br />
        </div>
    </div>

My JSON:

{
  "UEFA Champions League": [
    {
      "id": 152494,
      "home_team": "APOEL Nicosia",
      "home_short": "",
      "away_team": "Paris SG",
      "away_short": ""
    },
    {
      "id": 152519,
      "home_team": "Chelsea",
      "home_short": "",
      "away_team": "Maribor",
      "away_short": ""
    }
  ],
  "Barclays Premier League": [
    {
      "id": 126938,
      "home_team": "Arsenal",
      "home_short": "",
      "away_team": "Hull",
      "away_short": ""
    },
    {
      "id": 126942,
      "home_team": "Manchester C",
      "home_short": "Man C",
      "away_team": "Tottenham",
      "away_short": "Man C"
    }
  ]
}

My AngularJS controller:

myApp("LeaguesCtrl", function($scope, $http) {
  $http.get('http://api.odds24.com/best-odds?user=dev&leagues=SOCENGPRE,SOCINTCHL,SOCESPPRI').
    success(function(data, status, headers, config) {
      $scope.leagues = data;
    });
});

Answer 1

You have to specify in the ng-repeate, so like this;

<div class="col-lg-12" ng-controller="LeaguesCtrl">
    <div ng-repeat="(key, league) in leagues">
        League:  {{key}}
        <table>
            <tr ng-repeat="match in league">
                <td style="padding: 0 5px">{{match.home_team}}</td>
                <td style="padding: 0 5px">-</td>
                <td style="padding: 0 5px">{{match.away_team}}</td>
                <td style="padding: 0 5px; text-align: right"><a href="#">{{match.home_odds}}</a></td>
                <td style="padding: 0 5px; text-align: right"><a href="#">{{match.draw_odds}}</a></td>
                <td style="padding: 0 5px; text-align: right"><a href="#">{{match.away_odds}}</a></td>
            </tr>
        </table>
        <br />
    </div>
</div>

Then just use {{key}} .

Here is a plunker.

Answer 2

You would just use the key/value option in the ng-repeat. So it would look something like this:

<div ng-repeat="name, detail in league">

You then just reference it by using {{name}}.

More info in the docs for ng-repeat page.