title: Passing id in json through angular js
body: <p>I want to create a application which show the data of people and once the single person is clicked it has to show the details of the person.
  I have created id for json file using (index of json) but I don't know how to pass the seperate id to the popup function.</p>
  
  <pre><code> &lt;div class="content-wrapper" ng-controller="ListController"&gt;
   &lt;section class="content"&gt;   
     &lt;!-- /.box-header --&gt;
  
        &lt;div class="box-body table-responsive no-padding"&gt;
          &lt;div ng-controller="MainCtrl" class="container"&gt;
            &lt;!--controller="MainCtrl"--&gt;
            &lt;table class="table table-hover" ng-model="artists"&gt;
              &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Profile&lt;/th&gt;
                &lt;th&gt;First Name&lt;/th&gt;
                &lt;th&gt;Date&lt;/th&gt;
                &lt;th&gt;Status&lt;/th&gt;
                &lt;th&gt;Reknown&lt;/th&gt;
              &lt;/tr&gt;
  
  
              &lt;tr ng-repeat="item in artists | filter: query | orderBy: artistOrder:direction" id="table-cursor"&gt;
  
                &lt;modal title="{{artists.indexOf(item)}}" visible="showModal"&gt;
                  &lt;form role="form"&gt;
                    &lt;div class="form-group"&gt;
                      &lt;label for="text"&gt;Name&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="email" placeholder="Name" /&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                      &lt;label for="password"&gt;Password&lt;/label&gt;
                      &lt;input type="password" class="form-control" id="password" placeholder="Password" /&gt;
                    &lt;/div&gt;
                    &lt;button type="submit" class="btn btn-default"&gt;Send&lt;/button&gt;
                  &lt;/form&gt;
                &lt;/modal&gt;
  
                &lt;td ng-click="toggleModal(artists.indexOf(item))"&gt;&lt;span value="{{artists.indexOf(item)}}"&gt;&lt;/span&gt;{{item.name}}&lt;/a&gt;
                &lt;/td&gt;
                &lt;td ng-click="toggleModal()"&gt;&lt;span value="{{artists.indexOf(item)}}"&gt;
                    &lt;/span&gt;
                  &lt;img ng-src="images/{{item.shortname}}_tn.jpg" width="35" height="35" alt="profile"&gt;
                &lt;/td&gt;
                &lt;td ng-click="toggleModal()"&gt;&lt;span value="{{artists.indexOf(item)}}"&gt;&lt;/span&gt;
                  &lt;h5&gt;{{item.shortname}}&lt;/h5&gt;
                &lt;/td&gt;
                &lt;td ng-click="toggleModal()"&gt;&lt;span value="{{artists.indexOf(item)}}"&gt;&lt;/span&gt;11-7-2014&lt;/td&gt;
                &lt;td ng-click="toggleModal()"&gt;&lt;span value="{{artists.indexOf(item)}}"&gt;&lt;/span&gt;&lt;span class="label label-success"&gt;Approved&lt;/span&gt;
                &lt;/td&gt;
                &lt;td ng-click="toggleModal()"&gt;&lt;span value="{{artists.indexOf(item)}}"&gt;&lt;/span&gt;{{item.reknown}}&lt;/td&gt;
  
                &lt;tr&gt;
  
            &lt;/table&gt;
          &lt;/div&gt;
          &lt;!--controller="MainCtrl"--&gt;
        &lt;/div&gt;
        &lt;!-- /.box-body --&gt;
      &lt;/div&gt;
      &lt;!-- /.box --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
    </p>
  
  <p></p>
  
  <pre><code>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: '&lt;div class="modal"&gt;' +
    '&lt;div class="modal-dialog"&gt;' +
    '&lt;div class="modal-content"&gt;' +
    '&lt;div class="modal-header"&gt;' +
    '&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;' +
    '&lt;h4 class="modal-title"&gt;{{ title }}&lt;/h4&gt;' +
    '&lt;/div&gt;' +
    '&lt;div class="modal-body" ng-transclude&gt;&lt;/div&gt;' +
    '&lt;/div&gt;' +
    '&lt;/div&gt;' +
    '&lt;/div&gt;',
  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;
      });
    });
  }
  };
  });
  </code></pre>