dynamic routing with array item in angularjs after filtering array
<p>I have a problem with my angularjs app where my app is routing to the wrong page when using an ng-repeat array to determine the route.</p>

<p>data looks like this and is accessed in the person controller:</p>

<pre><code>[
  {
    "name":"AJ lastname",
    "img_name":"AJ_lastname",
    "location":"Baltimore, Maryland",
    "info":"stuff"
  },
  {
    "name":"Albert lastname",
    "img_name":"Albert_lastname",
    "location":"Boston, Massachusetts",
    "info":"stuff"
  } // ... more data
]
</code></pre>

<p>html: (the anchor tag links to the person based on their index in the array (I believe this may be what I need to change to fix the problem, but I'm not sure)</p>

<pre><code>&lt;ul class="main-list"&gt;
  &lt;li class="list-item fade" ng-repeat="student in students | filter:filter"&gt;
    &lt;a href="/#person/{{$index}}"&gt;
    &lt;img class="portrait listimg" ng-src="/images/{{student.img_name}}.jpg" alt="portrait of {{student.name}}"&gt;
    &lt;h2&gt;{{student.name}}&lt;/h2&gt;
    &lt;h4&gt;{{student.location}}&lt;/h4&gt;
    &lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Routing from angular: (the route with '/person/:itemId' is routing to a page specific to a specific user, where their index in the array determines their id)</p>

<pre><code>app.config(function ($routeProvider, $httpProvider) {
  $routeProvider
    .when('/list', {
      templateUrl: './js/templates/list.html',
      controller: 'ListController'
    })
    .when('/person/:itemId', {
      templateUrl: './js/templates/person.html',
      controller: 'PersonController'
    })
    .otherwise('/list');
});
</code></pre>

<p>Here is the controller for the dynamic page. It works perfectly for the original array, but once I attempt to sort the array, the index no longer corresponds to the correct student. </p>

<pre><code>app.controller('PersonController', function ($scope, $http, $routeParams) {
  $scope.person = 'Someone\'s name';
  $http.get('../js/students.json').success(function (data) {
    $scope.allStudents = data;
    $scope.studentId = $routeParams.itemId;
    $scope.student = data[$scope.studentId];
  });
</code></pre>

<p>So the functional problem is that the index applies to the first student in the large array of data. It appears to work perfectly, and the correct data populates the page, but when I use the html/text input to filter the list, the original indices are updated on the html side, and they do not correspond to the original array. So the routing sends them to the wrong page. </p>

<p>How can I make the routing work even for a filtered list?</p>