this is my app.router.js :

agentRouter.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
 var root = {
        name: 'root',
        abstract: true,
        url: '',
        title: 'home',
        views: {
            'header':   { templateUrl: 'views/headers/header.app.html', controller: 'HeaderCtrl' },
            'body':     { templateUrl: "views/root.html" },
            'footer':   { templateUrl: 'views/footers/footer.app.html' }
        }
    }; 
        var agent = {
            name: 'root.agent',  
            url: '/agent',      
            title: 'agent',   
            views: {
                'root.sidebar':     { templateUrl: "views/main.sidebar.html" },
                'root.container':   { templateUrl: "views/partials/agent/list.container.html" }
            }
        };
        var detail = {
            name: 'root.agent.detail', 
            url: '/detail/:id',
            title: 'agentDetail',      // use for breadcrumb
            views: {
                'root.sidebar':     { templateUrl: "views/main.sidebar.html" },
                'root.container':   { templateUrl: "views/partials/agent/list.chantier.html" }
            }
        };
        /.../
        $stateProvider.state(root);
        $stateProvider.state(agent);
        $stateProvider.state(detail);
    }
]);

and this is my root.html :

<!--Breadcrumb content-->

<ul class="row breadcrumb">
    <i class="glyphicon glyphicon-home" style=""></i>
    <li ng-repeat="state in $state.$current.path">
        <a ng-href="#{{state.url.format($stateParams)}}"><span ng-bind="state.title"></span></a>
        <span ng-hide="$last" class=""></span>
   </li>
</ul>

 <!--Sidebar content-->
 <div ui-view="root.sidebar">default root.sidebar</div>

    <!--Container content-->
   <div style="background-color: #f9f9f9" ui-view="root.container">default root.container</div>

I can access to my "agent" page (a list of person) and my breadcrumb is right : home / agent

but when i click on an item of the list i got always the same page but my breadcrumb is right : home / agent / agentDetail

but in app.router.js if change detail like this :

var detail = { name: 'root.detail', // référence initiale + detail (fils) url: '/agent/detail/:id', // réference utilisée dans les fichiers HTML, attention c'est la suite de l'url précédente!!! title: 'agentDetail', // référence utilisée pour le breadcump views: { 'root.sidebar': { templateUrl: "views/main.sidebar.html" }, 'root.container': { templateUrl: "views/partials/agent/list.chantier.html" } } };

i got the right page (list.chantier.xml) but the breadcrumb is false :

home / agentDetail instead of home / agent / agentDetail

I would like to got the right breadcrumb (home / agent / agentDetail) with the right page (list.chantier.html) when i click on an item of the agent list page (list.container.html)

Thank you in advance for your help