AngularJS - Get JSON Attribute and display it

Question

I have a bootstrap model with ng-repeat in it. It displays the JSON Data. Now I want to click a team (teamname) and display it in the console.log . But, my problem is I cant get the teams.team (the team name)...

Do you have any idea how to handle this?

app.js

app.controller('modalController', ['$scope', '$timeout', '$http', function ($scope, $timeout, $http) {
   $scope.$on('modal', function (event, args) {
      $http.get('../data/teams.json').then(function (response) {
         var teams = response.data.teams;
         var teamsArray = [];
         for (var p  in  teams) {
              var d = teams[p];
              teamsArray.push(d);
         }
         $scope.teamSelected = function () {
              console.log("Clicked" + teams.team)
         };
         $scope.teams = teamsArray;
      });
   }) 
}]);

modal.html

<div class="col-md-4 col-sm-6 col-xs-12" ng-repeat="team in teams | filter:team | limitTo: paginationLimit()" ng-click="teamSelected(teams.team)">
    <div class="row pad-team-selection-view">
         <button type="button" class="btn btn-default team-selection-view">
            <img ng-src="{{ team.logo }}" width="18" height="18" class="img-logo">{{ team.team }}
         </button>
    </div>
</div>

teams.json

{
  "teams": [
    {
      "id": "0",
      "league": "1. Bundesliga",
      "team": "FC Augsburg",
      "country": "Deutschland",
      "logo": "https://upload.wikimedia.org/wikipedia/de/b/b5/Logo_FC_Augsburg.svg"
    },

Answer 1

In the ng-repeat div where you are passing in teams.team, you actually already have the team object so you can just pass in team. Also, make sure that team is an input to your teamSelected function like this:

HTML:

ng-click="teamSelected(team)"

JavaScript:

$scope.teamSelected = function (team) {
  console.log("Clicked" + team.team)
};