title: How do I only show one element on click within an ng-repeat?
body: <pre><code>.div(ng-repeat='x in xs')
      {{x}}
    .title-div(ng-click='showIt = ! showIt')
    .display-div(ng-show='showIt')
      .second-repeat(ng-repeat='b in bs')
         .display-contents(ng-if='x == b.x')
           {{b.name}}
  </code></pre>
  
  <hr>
  
  <p>html is template for jade / haml, if you are not familiar</p>
  
  <hr>
  
  <p>So, with this code above, I can toggle the ng-show when I click on the title-div. However, I want to only be able to have one display-div show at a time within the ng-repeat. When I click a corresponding title the display-div shows, then the others are hidden. </p>
  
  <p>I know how I would do this in Jquery, but I'm a bit lost as the proper way to do this in angular. Directive? </p>