I want to take id from list.html page and use the same id to display the details on the list-detail.html page.I just started using angularjs.I am not able to display the details based on id. This is my code:
 index.html

```
    <body ng-app="myAppnew">
        <h1>Friends</h1>
        <section ui-view></section>
      </body>

```

list.html

```
<ol>
  <ul ng-repeat="friend in friends">
   <a ui-sref="listDetail({Id: friend.id})">{{friend.name}}</a>
  </ul>
</ol>

```

list-detail.html

```
<h1>Friend Detail</h1>
{{id}}<br />
{{name}}<br />
{{imageLocation}}<br />

```

app.js

```
var myApp = angular.module('myAppnew', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('list', {
      url: '/',
      templateUrl: 'list.html',
      controller: 'mainCtrl'
    })
    .state('listDetail', {
      url: '/:Id',
      templateUrl: 'list-detail.html',
      controller: 'mainCtrl'
    });
});

myApp.controller('mainCtrl', function($scope, $stateParams,$http) {
  console.log(arguments);
    $http.get("http://www.fashto.in/rest/getmaincategories").then(function (response) 
                                                           {
         $scope.friends = response.data;
              });

  function findFriend(id){
    var targetFriend = null;
    $scope.friends.forEach(function(friend){
      console.log("Test",friend.id,id,friend.id === id)
      if (friend.id === id) targetFriend = friend;
    }); 
    return targetFriend;
  }

  function list($scope, $stateParams) {
    var friend = findFriend(parseInt($stateParams.Id));

    angular.extend($scope, friend);
  }

  if ($stateParams.Id) {
    list($scope, $stateParams,$http);
    console.log($scope);
  }
});

```

Thank you in advance.