Get JSON array object specific Id depending on which item i click on AngularJS

Question

So i have a table with a list of teams, what i want to do is when i click on a team name it displays a new view with team details. There is 2 controllers, 1 to get league table and fixtures and then 1 for the team details. So far i have from the controller in the league table looped through the Json object array and gotten a list of links which contains the ID i need to pass in to the team details controller so i can specify which team it should display. Because the teams dont have the ID in the object i had to do it this way.

So the problem is that i can console.log all ID's but it only passes through the last ID logged. Which genereates the same team what ever team i click on. I want to get the specific ID for the team i click on and pass that to the team details controller id:.

I'm in the learning stages so excuse my poor code :).
If you see any improvements in my code writing please do let me know.

I get my data from:
http://api.football-data.org/

using the AngularJs factory library from:
https://github.com/JohnnyTheTank/angular-footballdata-api-factory

The View

<tbody>
  <tr ng-repeat="team in teams.standing | filter:searchText | orderBy:orderByField:reverseSort">


    // Where i want to somehow click on a team name and load that teams details
    <td><a href="#!/teamDetails"><strong>{{ team.teamName }}</strong></a></td>
  </tr>
</tbody>

Controller1

.controller('AppCtrl', ['$scope', 'footballdataFactory',  function($scope, footballdataFactory) {
  $scope.date = new Date();
  var apiKey = '***********************';

  $scope.$back = function() {
    window.history.back();
  };

  $scope.leagueId = function(id) {
    $scope.id = id;

    footballdataFactory.getLeagueTableBySeason({
      id: $scope.id,
      apiKey: apiKey, // Register for a free api key: http://api.football-data.org/register
    }).success(function (data) {
      $scope.teams = data;
      $scope.leagueCaption = data.leagueCaption;

      console.log("Get League", $scope.teams);
      console.log('Loop through league and get team ids ----------------------------');
      $scope.getTeamId = function(teamId) {
        var dataLength = $scope.teams.standing.length;
        for(var tUrl = 0; tUrl < dataLength; tUrl++) {
          $scope.teamUrl = $scope.teams.standing[tUrl]._links.team.href.substr($scope.teams.standing[tUrl]._links.team.href.lastIndexOf('/') +1);
          console.log('teamId: ' + $scope.teamUrl);
        }
      }
    });
  };

  $scope.league = function(id) {
    $scope.id = id;
    footballdataFactory.getFixtures({
      league: $scope.id,
      apiKey: apiKey,
    }).success(function(data){
      $scope.games = data;
      console.log("getFixtures", $scope.games);
    });
  };
}])

Controller2

// Team details controller
.controller('TeamCtrl', ['$scope', 'footballdataFactory', function($scope, footballdataFactory) {
  var apiKey = '*************************';

  footballdataFactory.getTeam({
    id: $scope.teamUrl, ***Inserting the last 2 or 3 digits i get from the url***
    apiKey: apiKey,
  }).success(function(data){
    $scope.teams = data;
    $scope.name = data.name;
    $scope.crestUrl = data.crestUrl;
    $scope.squadMarketValue = data.squadMarketValue;
    console.log("getTeam", $scope.teams);
  });

  footballdataFactory.getPlayersByTeam({
    id: $scope.teamUrl,
    apiKey: apiKey,
  }).success(function(player){
    $scope.players = player.players;

    console.log("getPlayersByTeam", player);
  });
}])

Answer 1

You can solve this problem easly with apiNG and the football-data plugin, that based on the same angular lib you even use. on the plugin page is a link to a working plnkr sample