JavaScript AngularJS+UI-Router common CRUD configuration

I'm struggling with ui-router configuration which will define basic CRUD in the application.

I need to be able to add, remove, edit and search for, say, clients. Quite basic task.

Main page with url "/clients/" shows [Add Client] button and Keyword input field for search with [Search] button.

Once I enter something into search field and press the button I should navigate to "/clients/search/:keyword", but essentially I'll stay on the same page and search results will be loaded below the input field.

That's quite easy to implement, but interesting starts when I need to edit a client.

When I click on one of the rows from search results I expect a popup to be show with client information/form. At the same time, application should navigate to certain URL, so I can use that URL to share with someone, or basically use back button in my browser. So application should navigate to "/clients/edit/:clientId". Make total sense, right?

Similar should happen when I try to add a new client. Application navigates to "/clients/add" or "/clients/edit/0".

How would your organise routes for that? Obovioulsy, Sticky routes and Deep State Redirect are required here. So I managed to organise it this way so far:

function clientStateConfig ($stateProvider, $rootScope) {

  console.log('Client State :: init');

  $stateProvider.state('main.clients', {
    url: '/clients',
    skipAuthorisation: true,
    controller: 'ClientStateController as clientState',
    template: clientStateTemplate
  }).state('main.clients.create', {
    url: '/create',
    skipAuthorisation: true,
    views: {
      'modal': {
        template: '<div ui-view></div>'
      }
    },
    onEnter: showClientModal
  }).state('main.clients.edit', {
    url: '/edit/:clientId',
    skipAuthorisation: true,
    views: {
      'modal': {
        template: '<div ui-view></div>'
      }
    },
    onEnter: showClientModal
  }).state('main.clients.search', {
    url: '/search/:keyword',
    skipAuthorisation: true,
    deepStateRedirect: true,
    sticky: true,
    views: {
      'search': {
        template: clientSearchStateTemplate,
        controller: 'ClientSearchStateController as clientSearch'
      }
    }
  });

};

function showClientModal ($uibModal, $previousState, $rootScope) {

  $previousState.memo('modalInvoker'); // remember the previous state with memoName 'modalInvoker'

  let modal = $uibModal.open({
    template: clientModalTemplate,
    backdrop: 'static',
    controller: 'ClientModalController as clientModal'
  });

 }

ClientState template:

<h1>Clients</h1>
<div ui-view="search"></div>
<div ui-view="modal"></div>

Search template: {{client}}

Modal and controllers code are not that relevant I think. So the first and main problem is - when I navigate to "/clients/" I don't, obviously, see the search field, because I need to go to "/clients/search/" instead. So clients route should always redirect to search. But if it always redirects to search - here comes the problem with popups when user enters "/clients/edit/123". It shouldn't navigate in that case.

Other way: I can put search field into root ClientState template, and trigger $state.go('main.clients.search') on search button from there. Which would be ideal. But the problem will appear when user enters url "/clients/search/superkeyword" directly form the browser, and ClientState won't have access to that keyword state param as it is child state param. So keyword input field will be blank.

I completely lost and confused with. How would you solve that?