angularjs ui-路由器嵌套状态新控制器不工作

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

// 定义模块
var app = angular.module('myApp', ['ui.router']);

// 配置路由
app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home');

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'HomeController'
    })
    .state('home.parent', {
      url: '/parent',
      templateUrl: 'parent.html'
    })
    .state('home.parent.child', {
      url: '/child',
      templateUrl: 'child.html',
      controller: 'ChildController'
    });
});

// 定义控制器
app.controller('HomeController', function($scope) {
  $scope.message = 'Welcome to Home';
});

app.controller('ChildController', function($scope) {
  $scope.message = 'Welcome to Child';
});

<h1>Home</h1>
<a ui-sref="home.parent">Go to Parent</a>
<div ui-view></div>

<h2>Parent</h2>
<a ui-sref="home.parent.child">Go to Child</a>
<div ui-view></div>

<h3>Child</h3>
<p>{{ message }}</p>