为什么浏览器重新加载页面会加载错误状态？

Question

我有两种状态，home和category。应用配置如下：

$urlRouterProvider.when('/', '/home').when('','/home');

$stateProvider
    .state('browse', {
        abstract: true,
        url: '/'
    })  
    .state('home', {
        url: '/home',
        views: {
            'home': {
                template: "<label>State : {{state}} </label><p>Recommendations</p>",
                    controller: "HomeController"
            }
        }
    })
    .state('category', {
        url: '/category/:categoryName/:catID',
        views: {
            'categories': {
                template: 
                    "<label>State : {{title}}/{{catID}}</label>"+
                    "<div infinite-scroll='fetchMoreProducts(catID,lastPage)' infinite-scroll-distance='1'>"+
                        "<h4 class='well' ng-repeat='p in products'>{{p}}</h4>"+
                    "</div>",
                controller: "CategoriesController", 
            }
        }
    })
    $urlRouterProvider.otherwise('/home');

假设我当前处于状态category，其URL为https://.../category/Dairy/11，我尝试从浏览器重新加载页面，状态未正确重新加载。我不知道加载了哪个状态，但我看不到ui-view应该在哪里。现在，如果我console.log($state.current)，它会在浏览器控制台中输出以下内容：

Object { name: "", url: "^", views: null, abstract: true }

这是plunk。重新加载后，我尝试检查$stateChangeStart事件以触发$state.go()，但这会导致无限循环。

为什么在刷新之前没有正确地重新加载应用程序所处的相同状态？