how to show exact content of ng-repeat using ng-click in angularjs -

i trying show exact content when click on data ng-repeat.

<div ng-repeat="trailspot in trail.waypoints">    <a ng-click="viewstate.showspotdetails = !viewstate.showspotdetails">       <p>spot {{$index + 1}}. {{trailspot.wpname}}</p>    </a>    <p >{{trailspot.wpdescription}}</p> </div> 

when click first wpname, want show wpdescription first wpname on div. should put in div.

<div class="panel-body" ng-show="viewstate.showspotdetails">         <div>             ???         </div> </div> 

anybody has tips on trying do?thank you!

just pass object assign property this:

http://jsfiddle.net/wls8axlj/

js

var app = angular.module('itemsapp',[]);  app.controller('itemsctrl',function($scope) {     $scope.items = [         {name:'test 1',details:'test 1 details'},         {name:'test 2',details:'test 2 details'}     ];      $scope.showdetails = function(i) {         $scope.item_details = i.details;     }; }); 

html

<div ng-app="itemsapp" ng-controller="itemsctrl">     <ul>         <li ng-repeat="i in items" ng-click="showdetails(i)">{{i.name}}</li>     </ul>     <hr>  {{item_details}} </div>