UI Router nested state parameters are same as father state parameters

Issue

I have a routing like this:

$stateProvider
    .state('Lorem', {
        url: '/Lorem',
        params: { type: 'A'},
        templateUrl: 'views/lorem.html',
        controller: 'loremCtrl as ctrl'
    })
    .state('Lorem.son', {
        url: '/son',
        params: { position: 'X'},
        templateUrl: 'views/lorem.son.html',
        controller: 'loremSonCtrl as ctrl'
    })

When I go to /Lorem/son route, my $stateParams is set with the father Lorem state params.

Why does this happen?
I just want read Lorem.son state params.

Can someone help me?

Solution

The controller of state Lorem.son is not being executed at all that’s why you don’t see the value of position. And that’s because you are not using ui-view directive.

You need to nest the views by adding following in your views/lorem.html:

<div ui-view />

For more details check documentation of ui-router.

Check this plunker for demo.

Answered By – Naveed

Answer Checked By – Marilyn (AngularFixing Volunteer)