Yii2 Angualjs Route

index.php

<?php

use yii\web\View;
use dee\angularjs\NgRoute;

//use yii\helpers\Html;

/* @var $this View */
?>
<div ng-app="test">
    <?=
    NgRoute::widget([
        'name' => 'test',
        'html5Mode' => true,
        'baseUrl' => 'test/',
        'preJsFile' => 'js/pre.js',
        'routes' => [
            '/' => [
                'templateFile' => 'templates/main.php',
            ],
            '/view/:id' => [
                'templateFile' => 'templates/view.php',
            ],
            '*' => [
                'templateFile' => 'templates/not-found.php',
            ],
        ],
    ])
    ?>
</div>

main.php

<i page-title="Main"></i>
<ul>
    <li ng-repeat="item in items"><a ng-href="view/{{item.id}}">{{item.value}}</a></li>
</ul>
<script>
function ($scope) {
        $scope.items = [
            {id: 1, value: 'Satu'},
            {id: 2, value: 'Dua'},
            {id: 3, value: 'Tiga'},
            {id: 4, value: 'Empat'},
        ];
    }
</script>

not-found.php

<i page-title="Not Found"></i>
<h1>Page Not Found</h1>

pre.js

test.directive('pageTitle', function () {
    return {
        restrict: 'A',
        scope: {
            pageTitle: '@'
        },
        link: function (scope) {
            jQuery('title').text(scope.pageTitle);
        }
    };
});

view.php

<i page-title="View {{id}}"></i>
<?= date('i:s')?> View {{id}}. Back to <a  href=".">main</a>&nbsp;
<a ng-if="id > 1" ng-href="view/{{id-1}}">&lt;&lt;</a>
&nbsp;
<a ng-if="id < 4" ng-href="view/{{id+1}}">&gt;&gt;</a>

Path = {{ $location.path() }}

<script>
function ($scope, $routeParams, $location) {
    $scope.id = parseInt($routeParams.id, 10);
    $scope.$location = $location;
}
</script>