Passing id from one page to another in angularjs

ionic-v1
1 
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

myApp.controller('mainCtrl', function($scope, $stateParams, $http) {
  //creating promise here
  var friendsPromise = $http.get("http://www.fashto.in/rest/getmaincategories").then(function(response) {
    $scope.friends = response.data;
  });


  function findFriend(id) {
    var targetFriend = null;
    //wait till promise resolve
    friendsPromise.then(function() {
      $scope.friends.forEach(function(friend) {
        if (friend.id === id)
          scope.friend = friend; //set current friend.
      });
    });
  }

  function list() {
    findFriend(parseInt($stateParams.Id));
  }

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