ui-router + growing-panes

 .state('users', {
    url: '/users',
    ...
  })
  .state('users.details', {
    url: '/:id',
    ...
  })
  .state('users.details.payment', {
    url: '/payment',
    ...
  })
  .state('users.details.payment_details', {
    url: '/payment/:payment_id',
    ...
  })
  .state('users.details.payment_details.from', {
    url: '/from'
    ...
  });

• uses ng-show to show/hide panes
  
• uses nested states and ui-views
• uses state data to keep track of depth
• uses directives: <growing-panes /> and <pane />