How to make separate controller for nested ui-router page?

Question

JavaScript

Good afternoon!
You need to make sure that different controllers work for the url /sites and /sites/add. Routing looks like this:

$stateProvider
    .state('sites', {
        url: '/pub/sites',
        templateUrl: tmpsPath+'/sites/view/template.html?v='+VERSION,
        controller: 'Pages.sites'
    })
    .state('sites.add', {
        url: '/add',
        templateUrl: tmpsPath+'/add/template.html?v='+VERSION,
        controller: 'Pages.sites.add'
    });

But for both urls, the same Pages.sites controller works. What is the problem and how can it be fixed?
Or did I not correctly understand the meaning of nested routing and in my case I need to write like this?

$stateProvider
    .state('sites', {
        url: '/pub/sites',
        templateUrl: tmpsPath+'/sites/view/template.html?v='+VERSION,
        controller: 'Pages.sites'
    })
    .state('sites_add', {
        url: '/pub/sites/add',
        templateUrl: tmpsPath+'/add/template.html?v='+VERSION,
        controller: 'Pages.sites.add'
    });

Answer 1

Your tags are cool, nothing to say.
This is one of the traps that I fell into when I started using ui-router, which I later abandoned (maybe I will rethink it in the future, but for now). Here is an excerpt from the wiki:
Those. with an active state of the third, for example, level, all parent states will be active and their controllers will be instantiated.
Here's a simple example:
plnkr.co/edit/7FD5Wf?p=preview