angularjs: tab selection for ng-model

Angularjs:

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-sanitize.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-route.js"></script>
<div ng-app="myApp" ng-controller="navCtrl">
    
    <h1>Projects list </h1>
    
    <ul class="nav nav-tabs" >
        <li
            ng-repeat="project in projects"
            ng-class="{active: isActive($index)}">
            <a ng-click="setProject(projects[$index])">
                {{project.title}}
            </a>
        </li>
    </ul>

    <h2>{{project.title}} status</h2>
    <ul class="nav nav-tabs">
        <li ng-class="getPage()=='/project/status' ?'active':''">
            <a ng-href="#/project/status">
                Résumé
            </a>
        </li>
        <li ng-class="getPage()=='/project/graphs/burndown' ?'active':''">
            <a ng-href="#/project/graphs/burndown">
                Graphe RÀF
            </a>
        </li>
        <li ng-class="getPage()=='/project/details'?'active':''">
            <a ng-href="#/project/details">
                Liste détails
            </a>
        </li>
    </ul>

    <!-- partial content -->
    <section id="partial" ng-view></section></div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');


* {
    font-family:"AvenirNextCondensed-Regular" sans-serif;
}


#view {
    border: dotted 1px green;
}

JavaScript

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

app.config(function($routeProvider) {
	$routeProvider
    .when('/project/status',	       {controller:'resumeCtrl', template:'<div>Status: {{getProject().description}}'})
    .when('/project/graphs/burndown',  {controller:'graphCtrl', template:'<div>Graph:  {{getProject().description}}'})
    .when('/project/details',	       {controller:'listCtrl', template:'<div>Détails:  {{getProject().description}}'})
	// Default
	.otherwise({redirectTo:'/project/status'});
});

/* If you didn't want to use a service, you could store your data in a constant. */
//app.constant('projects', [
//    {	id: 0,
//        name: 'Proj1',		
//        title: 'First project',
//		description: ['First project description']
//	},
//    {	id:0,
//        name: 'Proj2',		
//        title: 'Second project',
//	    description: ['Second project description']
//    }
//    ]);

app.service('dataService', function(){
    return{
        getData: function(){
            return  [
                {	id: 0,
                    name: 'Proj1',		
                    title: 'First project',
		            description: ['First project description']
	            },
                {	id:1,
                    name: 'Proj2',		
                    title: 'Second project',
	                description: ['Second project description']
                }
            ];
        }
    };
});

app.service('navService', function(){
    selectedProject = {};
    return {
        getProject: function(){        
            console.log(selectedProject);
            return selectedProject;
        },
        
        setProject: function(project){
            console.log('setProject - ' + project.id);
            selectedProject = project;
        },
        
        isActive: function(id){
            return selectedProject.id == id;
        }
    };
});

app.controller('navCtrl', function ($scope, $location, $http, navService, dataService) {
   ...