AngularJS - Declarative Approach - Active Element

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<ul class="navigation" ng:controller="NavigationController">
    <li>Active: {{states.activeItem}}, Change here:
        <input ng-model="states.activeItem" />
    </li>
    <li ng-repeat="item in items" class="item" ng-class="{'active': item.id == states.activeItem}" ng-click="states.activeItem=item.id">{{item.title}}</li>
</ul>

CSS

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

JavaScript

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

app.controller('NavigationController', function ($scope) {
    // Have to use a wrapper object, otherwise "activeItem" won't work! Just try it!
    $scope.states = {};
    $scope.states.activeItem = 'item1';
    $scope.items = [{
        id: 'item1',
        title: 'Item 1'
    }, {
        id: 'item2',
        title: 'Item 2'
    }, {
        id: 'item3',
        title: 'Item 3'
    }];
});