Angularjs && ui-router - how to implement transition between parentPage and childPage without reload?

Question

JavaScript

Good afternoon! I have a problem with the implementation of this question. There are 3 pages, their routing is:
1) page home - start page

.state('home', {
  url: '/',
  views: {
    page: {
      templateUrl: function() {
        return startPath + '/home/page.html';
      },
      controller: 'homePage'
    }
  }
})

2) page with profiles:

.state('profiles', {
  url: 'profiles?city',
  reloadOnSearch: false,
  params: {
    city: null
  },
  views: {
    page: {
      controller: 'profilesPage',
      templateUrl: function () {
        return startPath + '/profiles/page.html';
      }
    }
  }
})

3) profile details page

.state('profile', {
  url: '/profiles/:profileId',
  reloadOnSearch: false,
  //parent: 'profiles',
  views: {
    page: {
      controller: 'profilePage',
      templateUrl: function() {
        return startPath + '/profile/page.html';
      }
    }
  }
})

Support for html5 is enabled
$locationProvider.html5Mode(true);
In the view, I insert it. <div ui-view="page"></div>
When the main one is loaded, everything is displayed, the transition from the main page to the profile list page, everything goes without reloading, and everything is also displayed. But here the transition from the list page to the profile details page occurs with a page reload. How to do so to avoid this?
I wanted to see the url path like this: / -> /profiles?city -> profiles/profileId
PS I have already tried many options ($state.go, $state.transitionTo, abstract: true, etc.), but I feel that I do not understand something fundamental, or even a cant).
PPS When you switch from the list page to the profile details page, the whole appearance changes, even the header and footer. And to be honest, this also breaks my pattern a bit in understanding the problem)
UPDATE:
I threw in a plunker to show exactly how I wanted to do it.
plnkr.co/edit/ZGN1AHxoP2kluLP2mwJL?p=preview
The bottom line is that in the list, by clicking on Product 1 (as a child view), we can reach parent.products, but there is no complete content replacement. In the second case (- Product 1 (as a Root view)), we have a complete change of content, but at the same time I cannot reach the parent products. And there is also a reboot. Actually, I want to understand how the second option can be done with a complete change of content, but without reloading (I just don’t really want to load everything again for this page, or shove it into sessionStorage, although I’ll think about the latter, of course)
Thank you in advance!

Answer 1

Here is an example plnkr.co/edit/u18KQc?p=preview