title: Naming ng-show dynamically
body: <p>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.</p>
  
  <p>So my approach now is to use the <code>id</code> of each user to create a unique <code>ng-show</code>. Then when I click on a list item a function is called:</p>
  
  <pre><code>&lt;ul id="users" ng-repeat="user in users"&gt;
      &lt;li ng-click="showUserDetail(user.id)"&gt;
          {{user.name}}
          &lt;div class="slide" ng-show="dropDownSection_{{user.id}}"&gt;
              //Stuff will go here
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The <code>showUserDetail</code> function is:</p>
  
  <pre><code>$scope.showUserDetail = function(id) {
      //not sure I can do this?
      var section = "dropDownSection" + "_" + id;
      $scope.section = true; //this would normally show the animation
  }
  </code></pre>
  
  <p>but this doesn't work - the dropdown doesn't appear.</p>
  
  <p>Is there a nice "Angular" way of achieving something like this?</p>