title: Angular js - basic toggle of additional object values
body: <p>I would like to output a basic list of names, and below the list display some text.  This text should only be displayed once you've clicked on an item and it should toggle when selecting another.</p>
  
  <p>What I've got so far</p>
  
  <pre><code>&lt;div ng-app&gt;
      &lt;div ng-controller="contacts"&gt;
          &lt;ul&gt;
              &lt;li ng-repeat="person in people | orderBy:'name'"&gt;
                  &lt;a  href="#"&gt;{{person.name}}&lt;/a&gt;
                  &lt;span&gt;{{person.age}}&lt;/span&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="desc"&gt;
          &lt;!-- I  would like to output the descriptions here --&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;   
  &lt;script&gt;
  var contacts = function($scope) {
      $scope.people = [
          {name:"paul", age:30, desc:"this is a description"},
          {name:"jax", age:33, desc:"this is another description right here"},
          {name:"yoda", age:33, desc:"final description goes here"},
          {name:"steve", age:53, desc:"jsut kidding - one more."}
      ];
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm pretty sure I should be using ng-click and possible the model etc but this simple task is doing my head in.  I'm able to do a basic show and hide below the link (though not sure about toggling them).</p>
  
  <p>Super new to angular, please excuse me if this seems like a retarded request.
  Looking for a super clean, quick and easy way to do this. Any input would be great.</p>