通过angular js在json中传递ID

我想创建一个显示人员数据的应用程序，一旦单击单个人员，它就必须显示人员的详细信息。我已经使用（json的索引）为json文件创建了id，但是我不知道如何将单独的id传递给弹出功能。

 <div class="content-wrapper" ng-controller="ListController">
 <section class="content">   
   <!-- /.box-header -->

      <div class="box-body table-responsive no-padding">
        <div ng-controller="MainCtrl" class="container">
          <!--controller="MainCtrl"-->
          <table class="table table-hover" ng-model="artists">
            <tr>
              <th>Name</th>
              <th>Profile</th>
              <th>First Name</th>
              <th>Date</th>
              <th>Status</th>
              <th>Reknown</th>
            </tr>


            <tr ng-repeat="item in artists | filter: query | orderBy: artistOrder:direction" id="table-cursor">

              <modal title="{{artists.indexOf(item)}}" visible="showModal">
                <form role="form">
                  <div class="form-group">
                    <label for="text">Name</label>
                    <input type="text" class="form-control" id="email" placeholder="Name" />
                  </div>
                  <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" />
                  </div>
                  <button type="submit" class="btn btn-default">Send</button>
                </form>
              </modal>

              <td ng-click="toggleModal(artists.indexOf(item))"><span value="{{artists.indexOf(item)}}"></span>{{item.name}}</a>
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}">
                  </span>
                <img ng-src="images/{{item.shortname}}_tn.jpg" width="35" height="35" alt="profile">
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>
                <h5>{{item.shortname}}</h5>
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>11-7-2014</td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span><span class="label label-success">Approved</span>
              </td>
              <td ng-click="toggleModal()"><span value="{{artists.indexOf(item)}}"></span>{{item.reknown}}</td>

              <tr>

          </table>
        </div>
        <!--controller="MainCtrl"-->
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  </div>
</div>

var myApp = angular.module('myApp', [
 'ngRoute',
 'myApp'
  ]);



myApp.controller('ListController', ['$scope', '$http', '$routeParams',
  function($scope, $http, $routeParams) {
    $http.get('angular/data.json').success(function(data) {
     $scope.artists = data;
     $scope.artistOrder = 'name';
    $scope.whichItem = $routeParams.itemId;
   });
  }
 ]);


myApp.controller('MainCtrl', ['$scope', '$http', '$routeParams',
 function($scope, $http, $routeParams) {
  $http.get('angular/data.json').success(function(data) {
  $scope.showModal = false;
  $scope.artists = data;
  $scope.whichItem1 = $routeParams.itemId;
  $scope.toggleModal = function() {
    $scope.showModal = !$scope.showModal;

  };
 });
 }
]);

 myApp.directive('modal', function() {
  return {
   template: '<div class="modal">' +
  '<div class="modal-dialog">' +
  '<div class="modal-content">' +
  '<div class="modal-header">' +
  '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
  '<h4 class="modal-title">{{ title }}</h4>' +
  '</div>' +
  '<div class="modal-body" ng-transclude></div>' +
  '</div>' +
  '</div>' +
  '</div>',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function postLink(scope, element, attrs) {
  scope.title = attrs.title;

  scope.$watch(attrs.visible, function(value) {
    if (value == true)
      $(element).modal('show');
    else
      $(element).modal('hide');
  });

  $(element).on('shown.bs.modal', function() {
    scope.$apply(function() {
      scope.$parent[attrs.visible] = true;
    });
  });

  $(element).on('hidden.bs.modal', function() {

    scope.$apply(function() {
      scope.$parent[attrs.visible] = false;
    });
  });
}
};
});