AngularJS: How to assign active class to clicked item in ng-repeat? - angularjs

Question

I am confused about how to show an .active class on a clicked item when using the ng-repeat directive. Here's a Plunker.
Here's my view:
<h4>Arctic Videos</h4>
<ul class="list-unstyled">
<li class="clearfix" ng-repeat="item in videos" ng-class="{ active: $index }" style="padding-bottom: 2em;">
<div style="float: left; position:relative;">
<img class="img-thumbnail" ng-src="{{item.thumbUrl}}" width="100" height="68" alt="">
</div>
<h4>{{item.title}}</h4>
</li>
</ul>
My script.js
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": "<p>Some text will go here and there. Some more will go here.</p><p>Yet even some more text will go here and there. yes, tehre's even more here.</p>",
"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": "<p>Some text will go here and there. Some more will go here.</p><p>Yet even some more text will go here and there. yes, tehre's even more here.</p>",
"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": "<p>some text can go here </p>",
"id": 400,
"thumbUrl": "http://placehold.it/100x68"
}
];
$scope.whichItem = $routeParams.itemId;
$scope.trustAsHtml = $sce.trustAsHtml.bind($sce);
});
How would I go about assigning an active class to a clicked item?

Answer 1

Use
ng-class="{ active: selectedVideo === item }"
And
ng-click="selectVideo(item)"
In the controller, add
$scope.selectVideo = function(video) {
$scope.selectedVideo = video;
}

Answer 2

you can use it like this
<li class="clearfix" ng-repeat="(key,item) in videos" ng-class="{ active:(condition) }" style="padding-bottom: 2em;">
key is the number of iteration and condition can be any Boolean logic to make active class true
like
ng-class="{ active: 1==1 }
in this case since 1==1 is true so active class will be printed .