AngularJS - simple route with parameters

HTML

<ng-view>Loading...</ng-view>

<!-- View Templates (Partials) -->
    
<script type=text/ng-template id=list.html>
    <!-- List -->
    <h1>Menu</h1>
    <hr>
    <ul>
        <li ng-repeat="item in items"><a ng-href="#/detail?item={{item.id}}">{{item.title}}</a></li>
    </ul>
</script>

<script type=text/ng-template id=detail.html>
    <!-- Detail -->
    <p> <a href="#/list">&lt; Back</a> </p>
    <hr>
    <h1>{{item.title}}</h1>
    <p>{{item.detail}}</p>
    <code>id:{{item.id}}</code>
</script>

JavaScript

angular.module('app', ['appServices'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
                when('/detail?:item', {templateUrl: 'detail.html',   controller: DetailCtrl}).
                otherwise({redirectTo: '/list'});
}]);

/* Controllers */

function ListCtrl($scope, Model) {
    $scope.items = Model.notes();
}

function DetailCtrl($scope, Model, $routeParams) {
    var id = $scope.itemId = $routeParams.item;
    $scope.item = Model.get(id);
}


/* Services */

angular.module('appServices', [])

        .factory ('Model', function () {
            var data = [
                {id:0, title:'Doh', detail:"A dear. A female dear."},
                {id:1, title:'Re', detail:"A drop of golden sun."},
                {id:2, title:'Me', detail:"A name I call myself."},
                {id:3, title:'Fa', detail:"A long, long way to run."},
                {id:4, title:'So', detail:"A needle pulling thread."},
                {id:5, title:'La', detail:"A note to follow So."},
                {id:6, title:'Tee', detail:"A drink with jam and bread."}
            ];
            return {
                notes:function () {
                    return data;
                },
                get:function(id){
                  return data[id];
                },
                add:function (note) {
                    var currentIndex = data.length;
                    data.push({
                        id:currentIndex, title:note.title, detail:note.detail
                    });
                },
                delete:function (id) {
                    var oldNotes = data;
                    data = [];
                    angular.forEach(oldNotes, function (note) {
                        if (note.id !== id) data.push(note);
                    });
                }
            }
});