Приложение AngularJS с использованием UI-роутера. Моя страница списка загружается правильно, но при нажатии на ссылки на странице списка мой URL-адрес изменяется, но мой HTML-код на странице не меняется, он остается на странице списка. Что не так с этой маршрутизацией?

app.js

var myApp = angular.module('myApp', ['ui.router']);

myApp.config([
    '$stateProvider', function($stateProvider) {
        $stateProvider
            .state('products', {
                url: '',
                templateUrl: 'Scripts/templates/manageProducts/products.list.html',
                controller: 'productListCtrl'
            })
            .state('products.detail', {
                url: '/:id',
                templateUrl: 'Scripts/templates/manageProducts/products.detail.html',
                controller: 'productDetailCtrl'
            });
    }
]);

Index.html

<div ng-app="myApp">
    <div ui-view></div>
</div>

В шаблоне products.list.html:

<a ui-sref="products.detail({ id: 1 })">Detail for Item 1</a>

Должен ли я даже использовать UI Router? Страница со списком и подробностями представляет собой 2 отдельных экрана.