Question: I have a list of users and when I click on a list item I would like a sub section to slide down from beneath it. I'm fine with the animation and this isn't the area I need help on. My problem is that when I click on any list item, all drop-down sections appear underneath all list items.

So my approach now is to use the `id` of each user to create a unique `ng-show`. Then when I click on a list item a function is called:

```
<ul id="users" ng-repeat="user in users">
    <li ng-click="showUserDetail(user.id)">
        {{user.name}}
        <div class="slide" ng-show="dropDownSection_{{user.id}}">
            //Stuff will go here
        </div>
    </li>
</ul>

```

The `showUserDetail` function is:

```
$scope.showUserDetail = function(id) {
    //not sure I can do this?
    var section = "dropDownSection" + "_" + id;
    $scope.section = true; //this would normally show the animation
}

```

but this doesn't work - the dropdown doesn't appear.

Is there a nice "Angular" way of achieving something like this?

Answer: 
what you can do is.. set the id to show on ng-click and check that id in ng-show

`ng-click="idToDisplay = user.id"`

and 

`ng-show="idToDisplay == user.id"`
You can keep track of the user for which details are currently shown via a variable on the scope. You set this variable when you click on a user.

```
$scope.userDetailId = 0; 
$scope.showUserDetail = function (id) {
    $scope.userDetailId = id;
}

```

Then, inside your `ng-repeat` section, you can check if the current user's id matches the tracked ID:

```
<ul id="users" ng-repeat="user in users">
  <li ng-click="showUserDetail(user.id)">
    {{user.name}}
    <div class="slide" ng-show="userDetailId == user.id">
      //Stuff will go here
    </div>
  </li>
</ul>

```

Check this [Plunker](http://jsfiddle.net/jhjwzgth/1/) for a demo.