title: toggle extra detail for a record inside an ngRepeat
body: <p>I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....</p>
  
  <p>So first problem is with routing </p>
  
  <pre><code>&lt;div ng-repeat="class in vm.classes"&gt;
      &lt;div class="class-overview"&gt;
          &lt;a href="#"&gt;
              &lt;span class="class-title"&gt;{{class.description}}&lt;/span&gt;
              ... more stuff here 
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="class-information collapse"&gt;
           &lt;div class="full-width"&gt;
                {{class.longDescription}}
           &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>he has supplied some javascript to handle the click on class-overview</p>
  
  <pre><code>$('.class-overview a').on('click',function(e) {
      e.preventDefault();
  });
  $('.class-overview').on('click',function() {
      $('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
      $(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
  }); 
  </code></pre>
  
  <p>and i have a line like this in my state provider</p>
  
  <pre><code>// default route
  $urlrouterProvider.otherwise("/")
  </code></pre>
  
  <p>So the problem is that the ui-router handles the click and sends me back to the home page. </p>
  
  <p>The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?</p>
  
  <p>or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...    </p>