title: AngularJS: How to assign active class to clicked item in ng-repeat?
body: <p>I am confused about how to show an <code>.active</code> class on a clicked item when using the ng-repeat directive. Here's <a href="http://plnkr.co/edit/iW1Z4GGvESti9kVm9yMd?p=preview" rel="nofollow">a Plunker</a>.</p>
  
  <p><strong>Here's my view:</strong></p>
  
  <pre><code>&lt;h4&gt;Arctic Videos&lt;/h4&gt;
  
  &lt;ul class="list-unstyled"&gt;
      &lt;li class="clearfix" ng-repeat="item in videos" ng-class="{ active: $index }" style="padding-bottom: 2em;"&gt;
          &lt;div style="float: left; position:relative;"&gt;
          &lt;img class="img-thumbnail" ng-src="{{item.thumbUrl}}" width="100" height="68" alt=""&gt;
          &lt;/div&gt;
          &lt;h4&gt;&lt;a href="#/videos/{{videos.indexOf(item)}}" ng-click="I AM NOT SURE WHAT TO PUT HERE"&gt;{{item.title}}&lt;/a&gt;&lt;/h4&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>My script.js</strong></p>
  
  <pre><code>    var ArcticApp = angular.module('ArcticApp', ['ngRoute', 'ngSanitize']);
  
      ArcticApp.config(function($routeProvider){
      $routeProvider
  
          .when('/', {
              templateUrl: './partials/map.html',
              controller: 'MainController'
          })
  
          .when('/videos/:itemId', {
              templateUrl: './partials/videos.html',
              controller: 'VideoController'
          })
  
          .otherwise({
              redirectTo: '/'
          })
  });
  
  ArcticApp.controller('MainController', function($scope){
  
      $scope.message = "This is the map page!";
  });
  
  ArcticApp.controller('VideoController', function($scope, $routeParams, $sce){
          $scope.videos = [
    {
      "blockquote": "et sint quae\nqui odio fugit quia aut modi id maxime\nsequi qui et",
      "title": "Canada",
      "synopsis": "&lt;p&gt;Some text will go here and there. Some more will go here.&lt;/p&gt;&lt;p&gt;Yet even some more text will go here and there. yes, tehre's even more here.&lt;/p&gt;",
      "id": 897,
      "thumbUrl": "http://placehold.it/100x68"
    },
    {
      "blockquote": "sit molestiae possimus ut in explicabo\nea autem saepe a iusto est exercitationem at\ndistinctio quia consectetur nulla vel maxime",
      "title": "USA",
      "synopsis": "&lt;p&gt;Some text will go here and there. Some more will go here.&lt;/p&gt;&lt;p&gt;Yet even some more text will go here and there. yes, tehre's even more here.&lt;/p&gt;",
      "id": 471,
      "thumbUrl": "http://placehold.it/100x68"
    },
    {
      "blockquote": "recusandae natus minus est saepe alias\nvero amet quia natus voluptatem ut saepe dolor rem\nperspiciatis quia unde quia cum aliquam sint",
      "title": "Russia",
      "synopsis": "&lt;p&gt;some text can go here &lt;/p&gt;",
      "id": 400,
      "thumbUrl": "http://placehold.it/100x68"
    }
  ];
          $scope.whichItem = $routeParams.itemId;
          $scope.trustAsHtml = $sce.trustAsHtml.bind($sce);
  });
  </code></pre>
  
  <p>How would I go about assigning an active class to a clicked item? </p>