<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <link data-require="bootstrap-css@3.0.3" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.11" data-semver="1.2.11" src="http://code.angularjs.org/1.2.11/angular.js"></script>
    <script data-require="angular-ui-router@*" data-semver="0.2.7" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="list.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Top <small>URL:{{$location.url() || '/'}}</small> </h1>
    <div class="box">
      <div ui-view="" autoscroll="false"></div>
    </div>
  </body>

</html>
var app = angular.module('app',['ui.router','ListCtrl'],['$stateProvider', '$urlRouterProvider',
function($stateProvider,$urlRouterProvider)
{
    $urlRouterProvider.otherwise('/emp');
    $stateProvider
        .state('emp',{
            url:"/emp"
            ,templateUrl:"list.html"
            ,controller:"ListCtrl"
        })
        .state('emp.detail',{
            url:"/detail/{empID:[0-9]{5}}"
            ,templateUrl:"detail.html"
            ,controller:function($stateParams,$scope){
                $scope.params = $stateParams;
            }
        })
        .state('emp.detail.pictures',{
            url:"/pictures"
            ,views:{
                "@":{
                    templateUrl:"pictures.html"
                    ,controller:function($stateParams,$scope){
                        $scope.params = $stateParams;
                    }
                }
            }
        });
}]);

app.run(function($rootScope, $location) {
  $rootScope.$location = $location;
});
/* Styles go here */
.box
{
  border:solid #CCC 1px;
  padding:1em;
}
.img
{
  display:inline-block;
  width:100px;
  height:100px;
  background-color:#EEE;
  margin:4px;
  border:solid #CCC 1px;
}
<h2>List View</h2>
<div class="list-group">
  <a ui-sref-active="active" class="list-group-item" ng-repeat="e in emps" ui-sref=".detail({empID:e.id})">{{e.name}}</a>
</div>
<h2>Detail View</h2>
<div class="box">
  <div ui-view autoscroll="false"></div>
</div>
angular.module('ListCtrl',[]).controller('ListCtrl',function($scope,$state){
  $scope.url = $state;
  $scope.emps = [
    {id:"00001",name:"Aさん"}
    ,{id:"00002",name:"Bさん"}
    ,{id:"00003",name:"Cさん"}
    ,{id:"00004",name:"Dさん"}
  ];
});
<h3>Detail Page</h3>
ID:{{params.empID}}
<div>
  <a ui-sref=".pictures({id:params.empID})">All pictures</a>
</div>
<h2>{{params.empID}} - Pictures</h2>
<div><a ui-sref="^")>Back to detail</a></div>
<div class="img"></div><div class="img"></div><div class="img"></div>
<div class="img"></div><div class="img"></div><div class="img"></div>
<div class="img"></div><div class="img"></div><div class="img"></div>