AngularJS - Simple Directive Use

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="app" ng-controller="mainCtrl">
    <div ng-repeat="list in listgroups" ng-init="selected = -1">
        <b>List {{$index + 1}}</b>
        <br/>
        <ul>
            <li ng-repeat="item in list" ng-class="{active:($parent.selected == $index)}" ng-click="$parent.selected = $index;">{{item}}</li>
        </ul>
    </div>
</div>

CSS

.active {
    background-color: red;
}

JavaScript

var app = angular.module('app', [])
    .controller('mainCtrl', function ($scope) {
    $scope.listgroups = [{
        id: 1,
        name: 'name',
        add1: 'add1',
        add2: 'add2',
        city: 'city',
        test: 'test'
    }, {
        id: 2,
        name: 'name',
        add1: 'add1',
        add2: 'add2',
        city: 'city',
        test: 'test'
    }];
});