Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
    <div ng-controller="NavigationController">
        <navigation over="items">
            <navigation-item ng-repeat="item in items">Item: {{item.title}}</navigation-item>    
        </navigation>
    </div>

CSS

ul.navigation li.active {
    background-color: blue;
}

JavaScript

var app = angular.module('app', []);

// Fill with data.
app.controller('NavigationController', function($scope){
	$scope.items = [{
	  id: 'item1', title: 'Item 1'
	}, {
	  id: 'item2', title: 'Item 2'
	}, {
	  id: 'item3', title: 'Item 3'
	}];
});

app.directive('navigation', function() {
    return {
        template: '<ul class="navigation" ng-transclude></ul>',
        replace: true,
        restrict: 'E',
        transclude: true,
        link: function($scope, $element, attrs){
             $scope.states = {};
             $scope.states.activeItem = 'item1';
        }
    };
});

app.directive('navigationItem', function(){
    return {
        template: '<li class="item" ng-class="{active: item.id == states.activeItem}" ng-click="states.activeItem=item.id" ng-transclude></li>',
        restrict: 'E',
        replace: true,
        transclude: true
    };
});