title: AngularJS change <li> element tags based on condition
body: <p>I have a list in which each list element can have different styles. Simple <code>HTML</code> looks like this: </p>
  
  <pre><code>&lt;li class="active"&gt;&lt;a href="[link]"&gt;One&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="[link]"&gt;Two&lt;/a&gt;&lt;/li&gt;    
  </code></pre>
  
  <p>When the user clicks <code>two</code>then I want the active element to move to that list item. I have tried the following solution. </p>
  
  <pre><code>// In my menu controller
  
  // Determines which link that should be active
  $scope.activeLinkID = 0;
  
  // Associative array with link names and paths
  $scope.linkArray = {};
  
  // Index 0 = linkName, index 1 = linkPath
  $scope.linkArray[0] = ["One", "#/link/one"]
  $scope.linkArray[1] = ["Two", "#/link/two"]
  [...]
  </code></pre>
  
  <p>I have tried to display this in my view like this:</p>
  
  <pre><code>&lt;li ng-repeat="(linkIndex, link) in linkArray | orderBy:linkIndex"&gt;&lt;a href="{{link[1]}}"&gt;{{link[0]}}&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>But I got stuck when trying to add elements into my <code>&lt;li&gt;</code> tag. The condition would be <code>activeLinkID == linkIndex</code> then add class="active".</p>
  
  <p>I'm not sure which is the best way to achive this using <code>AngularJS</code>. What is the best way to do it?</p>