Angular模板不在html中显示范围值

Question

我有一个$ stateprovider设置，如下所示。我在product.html页面中显示内容时遇到问题。问题是已解决的“标题”，在发送到控制器并设置在$ scope之后，不会显示在模板中。

$stateProvider
          .state('main', {
            templateUrl: 'views/main.html',
            url: ""
          })
          .state('billing', {
            url: "/billing",
            controller: 'BillingCtrl',
            views: {
              "":{
                templateUrl: 'views/billing/billing.html'
              },
              "cart@billing":{
                templateUrl: 'views/billing/cart.html',
                controller: 'CartCtrl'
              },
              "products@billing":{
                templateUrl: 'views/billing/products.html',
                controller: 'ProductCtrl',
                resolve: {title: function(){return 'Hello'}} 
              }
            }
          });

控制器是

app.controller('ProductCtrl', function($scope, title){
    $scope.title = title;
});

模板是

<div ui-view class="col-6">
    <h3>The test is {{title}}</h3>
</div>

在浏览器上显示为

The test is {{title}}

在chrome开发人员工具中，我可以看到标题获得“Hello”的值，但我无法理解为什么它没有解析，即使它看起来像一个非常愚蠢的bug。

我可以犯任何愚蠢的错误吗？