angular ui-router multi-routing

<!DOCTYPE html>
<html>

<head>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" />
  <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
  <script data-require="ui-router@0.2.13" data-semver="0.2.13" src="http://rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
  <script src="script.js"></script>
</head>

<body class="container" ng-app="main">
  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" ui-sref="lists">App Example</a>
      <ul class="nav">
        <li>
          <a ui-sref="listA">ListA</a>
        </li>
        <li>
          <a ui-sref="listB">ListB 1</a>
        </li>
      </ul>
    </div>
  </div>
   <div class="row">
      <div class="span12">
        <div class="well" ui-view></div>
      </div>
    </div>
</body>

</html>

angular.module('main', ['ui.router']).config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('lists', {
      url: '/lists',
      templateUrl: 'lists.tmpl.html'
    })
    .state('listA', {
      url: '/listA',
      templateUrl: 'listA.tmpl.html',
      controller: function($scope) {
        $scope.someList = [{
          Id: 1,
          Title: 'First'
        }, {
          Id: 2,
          Title: 'Second'
        }, {
          Id: 3,
          Title: 'Third'
        }];
      }
    }).state('listB', {
      url: '/listB',
      templateUrl: 'listB.tmpl.html',
      controller: function($scope) {
        $scope.someList = [{
          Id: 1,
          Title: 'Number 1'
        }, {
          Id: 2,
          Title: 'Number 2'
        }, {
          Id: 3,
          Title: 'Number 3'
        }];
      }
    }).state('listB.details', {
      url: '/:listBId',
      template: 'StateName: {{stateName}}</br>' +
        'StateParams: {{stateParams}}',
      controller: function($state, $scope) {
        $scope.stateName = $state.current.name;
        $scope.stateParams = $state.params;
      }
    }).state('listC', {
      parent: 'listA',
      url: '/:listAId/listC',
      templateUrl: 'listC.tmpl.html',
      controller: function($state, $scope) {
        $scope.someList = [{
          Id: 1,
          Title: '1'
        }, {
          Id: 2,
          Title: '2'
        }, {
          Id: 3,
          Title: '3'
        }];
      }
    }).state('listC.details', {
      url: '/:listCId',
      template: 'StateName: {{stateName}}</br>' +
        'StateParams: {{stateParams}}',
      controller: function($state, $scope) {
        $scope.stateName = $state.current.name;
        $scope.stateParams = $state.params;
      }
    });
  $urlRouterProvider.otherwise('/lists');
});

<ul class="nav nav-pills nav-stacked">
  <li><a ui-sref="listA">ListA</a></li>
  <li><a ui-sref="listB">ListB</a></li>
</ul>
<div ui-view></div>

<h1><small>ListA:</small><h1>
<ul class="nav nav-pills nav-stacked">
  <li ng-repeat="item in someList">
    <a ui-sref="listC({listAId:item.Id})">
      {{item.Title}}
      </a>
  </li>
</ul>
<hr/>
<div ui-view></div>

<h1><small>ListB:</small><h1>
<ul class="nav nav-pills nav-stacked">
  <li ng-repeat="item in someList">
    <a ui-sref="listB.details({listBId:item.Id})">
      {{item.Title}}
      </a>
  </li>
</ul>
<hr/>
<div ui-view></div>

<h1><small>ListC:</small><h1>
<ul class="nav nav-pills nav-stacked">
  <li ng-repeat="item in someList">
    <a ui-sref="listC.details({listCId:item.Id})">
      {{item.Title}}
      </a>
  </li>
</ul>
<hr/>
<div ui-view></div>