Angularjs When I click on link in View 1 I am Unable to Navigate to View 2

Question

I searched stackoverflow for a simple answer. Yes. I believe I am missing something simple. It is all in the learning process. Thanks for taking a look.

Update. I now am able to Navigate to the moreinfo.html View but I am Not Binding the Data.

Heading =======! Before modifications. index.html launches but 'View More Info' Links do Not work

Heading =======! After modifications. 'View More Info' links work but No Bound Data

Heading =======! moreinfo.html navigates fine to the view but again No Bound Data

stats.html  
//Main Point of Entry.    
<h2>Soccer</h2>
    Filter: <input type="text" ng-model="playersFilter.name" />
    <br /><br />
    <ul>
    <li>Sort By Category</li>
    </ul>
    <table>
        <tr>
            <th ng-click="doSort('Attempts')">Attempts</th>
            <th ng-click="doSort('Goals')">Goals</th>
            <th ng-click="doSort('Assists')">Assists</th>
            <th ng-click="doSort('Fouls')">Fouls</th>
            <th ng-click="doSort('Date')">Date</th>
            <th ng-click="doSort('average')">Average</th>
        </tr>
        <tr ng-repeat="player in players | filter:playersFilter | orderBy:sortBy:reverse">
            <td>{{ player.Goals }}</td>
            <td>{{ player.Attempts  }}</td>
            <td>{{ player.Assists }}</td>
            <td>{{ player.Fouls }}</td>
            <td>{{ player.date | date }}</td>
            <td>{{player.Goals / player.Attempts | number:2}}</td>   
            <td><a href ="#/moreinfo/{{ player.id }}"> View More Info</a></td>
        </tr>
    </table>
    <br />
    <span>Total Games: {{ players.length }}</span>

This is the page that I want to Navigate to when I Click on the link 'View More Info' from the stat.html page. But nothing happens and there are not any error hints in in the console or network tabs in Chrome Dev Tools.

moreinfo.html  
<h2>More Information</h2>
<table>
    <tr>
        <th>TeamImage </th>
        <th>oppImage </th>
    </tr>
    <!--<tr ng-repeat ="player in players">-->
        <td>{{player.Image}}</td>
        <td>{{player.teamImage}}</td>
    </tr>
</table>

I have embedded the json.

statsController.js  

    function() {

    var StatsController = function ($scope) {

        $scope.doSort = function(propName) {
           $scope.sortBy = propName;
           $scope.reverse = !$scope.reverse;
        };    
$scope.getAverage = function(){
    var average = 0;
    for(var i = 0; i < $scope.player.Goals.length; i++){
        var a = $scope.player.Goals[i];
        average += (player.Attempts / player.Goals);
    }
    return average;
}    

    $scope.players = [
    {
    id:1,
    games: [
           {
            "Goals": 1,
            "Attempts": 6,
            "Image": "http://www.soccer1.png",
            "opp": "USA",
            "Assists": 0,
            "team": "ECU",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam1.png",
            "date": "2014-03-31"
          },
          {
            "Goals": 0,
            "Attempts": 3,
            "Image": "http://www.soccer2.png",
            "opp": "CHI",
            "Assists": 1,
            "team": "KAZ",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam2.png",
            "date": "2014-04-02"
          }
        ]
},
{
    id:2,
    games: [
           {
            "Goals": 2,
            "Attempts": 2,
            "Image": "http://www.soccer22.png",
            "opp": "USA",
            "Assists": 0,
            "team": "ECU",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam22.png",
            "date": "2014-03-31"
          },
          {
            "Goals": 3,
            "Attempts": 3,
            "Image": "http://www.soccer33.png",
            "opp": "CHI",
            "Assists": 1,
            "team": "KAZ",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam33.png",
            "date": "2014-04-02"
          }
        ]
    }
];
};   
    StatsController.$inject = ['$scope'];

    angular.module('sportsApp')
      .controller('StatsController', StatsController);    
}());

I have embedded json below. This is a lot of redundant code. Ideally, I want to have all of the json in a separate file and use a factory but I am doing this step by step.

    moreinfoController.js
    (function() {

    var MoreInfoController = function ($scope, $routeParams) {
        // get to the route and the playerId

        var playerId = $routeParams.playerId;
        $scope.games = null;

        function init() {
            for (var i= 0, len=$scope.players.length; i<len; i++){
                if($scope.players[i].id === parseInt(playerId)) {
                    $scope.games = $scope.players[i].games;
                    break;
                }
            }  
        }
// init();       

$scope.players = [
    {
    id:1,
    games: [
           {
            "Goals": 1,
            "Attempts": 6,
            "Image": "http://www.soccer1.png",
            "opp": "USA",
            "Assists": 0,
            "team": "ECU",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam1.png",
            "date": "2014-03-31"
          },
          {
            "Goals": 0,
            "Attempts": 3,
            "Image": "http://www.soccer2.png",
            "opp": "CHI",
            "Assists": 1,
            "team": "KAZ",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam2.png",
            "date": "2014-04-02"
          }
        ]
},
{
    id:2,
    games: [
           {
            "Goals": 2,
            "Attempts": 2,
            "Image": "http://www.soccer22.png",
            "opp": "USA",
            "Assists": 0,
            "team": "ECU",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam22.png",
            "date": "2014-03-31"
          },
          {
            "Goals": 3,
            "Attempts": 3,
            "Image": "http://www.soccer33.png",
            "opp": "CHI",
            "Assists": 1,
            "team": "KAZ",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam33.png",
            "date": "2014-04-02"
          }
        ]
    }
];
    init();
    };

    MoreInfoController.$inject = ['$scope','$routeParams'];

    angular.module('sportsApp')
      .controller('MoreInfoController', MoreInfoController);    
    }());

Answer 1

Your link says

<td><a href ="#/moreinfo{{ player.id}}"> View More Info</a></td>

but I can not see any id property of player in your json.

It seems this to be an issue.

Additionally, it seems you are missing a / as well after moreinfo in your href.