title: optimal way to highlight selected li in Angularjs
body: <p>I am using Angularjs 1.4.7 version. I have a <code>&lt;ul&gt;&lt;li&gt;..&lt;/li&gt;....&lt;/ul&gt;</code> and want to apply a <code>background-color</code> property to the selected <code>li</code>. The code is as below:</p>
  
  <pre><code>      &lt;ul class="nav nav-pills nav-stacked"&gt;
          &lt;li class="menu-item" ng-repeat="item in items" ng-model="selectedElement" ng-class="{selected: $index==selectedElement}"&gt;
            &lt;a href=""&gt;{{item.key}} - {{item.value}}&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  </code></pre>
  
  <p>Inside the controller I have mapped the <code>$scope.selectedElement = 0</code> so by default the first <code>li</code> element gets the <code>.selected</code> class property.</p>
  
  <p>But when I click on the <code>li</code> element I need to apply the <code>.selected</code> class. I can bind a <code>ng-click</code> function passing the <code>$index</code> and set the <code>selectedElement</code> to the index, but can we do it just with the <code>ng-class</code> directive. Please let me know if this possible and where I am going wrong in my current approach.</p>