AngularJS - Routes and Resolving

HTML

<script src="http://code.angularjs.org/1.1.4/angular.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-app="myapp">
    <div ng-view></div>
    <a href="#" target="_blank">Open in Tab/Window</a>
    <script type="text/ng-template" id="/list.html">
        <h4>List</h4>
        <a href="#/detail/1" class="btn">One</a>
        <a href="#/detail/2" class="btn">Two</a>
    </script>
    <script type="text/ng-template" id="/detail.html">
        <h4>Detail {{data.id}}</h4><a ng-click="back()" class="btn">Back</a>
    </script>
</div>

JavaScript

var myapp = angular.module('myapp', []).config(function ($routeProvider) {
    $routeProvider.when('/list', {
        templateUrl: '/list.html'
    }).when('/detail/:id/', {
        templateUrl: '/detail.html',
        controller: 'DetailCtrl',
        resolve: {
            initData: function ($route, $q, $timeout) {
                var defer = $q.defer();
                var id = $route.current.params.id;
                var details = {};
                $timeout(function () {
                    details.id = id;
                    defer.resolve(details);
                }, 1000);
                return defer.promise;
            }
        }
    }).otherwise({
        redirectTo: '/list'
    });
});
myapp.controller('DetailCtrl', function ($scope, $location, initData) {
    $scope.data = initData;
    console.log($scope.data);
    $scope.back = function () {
        $location.path('/list');
    };
});