Angular js - basic toggle of additional object values - angularjs

Question

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.
What I've got so far
<div ng-app>
<div ng-controller="contacts">
<ul>
<li ng-repeat="person in people | orderBy:'name'">
{{person.name}}
<span>{{person.age}}</span>
</li>
</ul>
<div class="desc">
<!-- I would like to output the descriptions here -->
</div>
</div>
</div>
<script>
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."}
];
};
</script>
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).
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.

Answer 1

There are not silly questions; at some point we were all newbies :)
Controller
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."}
];
$scope.selectedPersonDescription = null;
$scope.selectPerson = function(person) {
$scope.selectedPersonDescription = person.desc;
}
};
View
<div ng-app>
<div ng-controller="contacts">
<ul>
<li ng-repeat="person in people | orderBy:'name'", ng-click="selectPerson(person)">
{{person.name}}
<span>{{person.age}}</span>
</li>
</ul>
<div class="desc">
{{ selectedPersonDescription }}
</div>
</div>
</div>