title: How to add the `active` class on click of `li` element
body: <p>I am quite new to AngularJS. I need to know how to handle this scenario using it.</p>
  
  <p>I have an array with values. I am using <code>ng-repeat</code> to iterate the array and it works fine. My requirement is how to add a class(<code>active</code>) to <strong>first</strong> child of <code>ul</code> and whenever user clicks, the clicked element should get the <code>active</code> class and <strong>remove the</strong> <code>active</code> <strong>class</strong> from the rest of the <code>li</code> elements.</p>
  
  <p>I've done that in JQuery very easily like:</p>
  
  <pre><code>$('li').addClass('active').siblings().removeClass('active')
  </code></pre>
  
  <p>But how to achieve the same here?</p>
  
  <p>My code :</p>
  
  <p><strong>JavaScript Controller</strong></p>
  
  <pre><code>var myApp = angular.module("myApp", []);
  
  myApp.controller("main", function ($scope) {
  
    $scope.items = [1,2,3,4,5];
  
    $scope.activate = function (item) {
  
      //how to active this item?
  
      //onload how to add class on first li?
  
    }
  
  })
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;ul&gt;
  
      &lt;li ng-click="activate(item)" ng-repeat="item in items"&gt;
          {{item}}
      &lt;/li&gt;
  
    &lt;/ul&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/hOSssomewrb69g8gBBcb?p=preview" rel="nofollow noreferrer">Live Demo</a></p>