angularjs - Show hidden div on ng-click within ng-repeat -

i'm working on angular.js app filters through json file of medical procedures. i'd show details of each procedure when name of procedure clicked (on same page) using ng-click. have far, .procedure-details div set display:none:

<ul class="procedures">     <li ng-repeat="procedure in procedures | filter:query | orderby:orderprop">         <h4><a href="#" ng-click="?">{{procedure.definition}}</a></h4>          <div class="procedure-details">             <p>number of patient discharges: {{procedure.discharges}}</p>             <p>average amount covered medicare: {{procedure.covered}}</p>             <p>average total payments: {{procedure.payments}}</p>          </div>     </li> </ul> 

i'm pretty new @ angular. suggestions?

remove display:none, , use ng-show instead:

<ul class="procedures">     <li ng-repeat="procedure in procedures | filter:query | orderby:orderprop">         <h4><a href="#" ng-click="showdetails = ! showdetails">{{procedure.definition}}</a></h4>          <div class="procedure-details" ng-show="showdetails">             <p>number of patient discharges: {{procedure.discharges}}</p>             <p>average amount covered medicare: {{procedure.covered}}</p>             <p>average total payments: {{procedure.payments}}</p>          </div>     </li> </ul> 

here's fiddle: http://jsfiddle.net/asmkj/

---

you can use ng-class toggle class:

<div class="procedure-details" ng-class="{ 'hidden': ! showdetails }"> 

i more, since allows nice transitions: http://jsfiddle.net/asmkj/1/