$stateParams not available in abstract state

[devaroop]

I want to access the url parameter($stateParam) inside a abstract state while calling a child state. I am curious to know how that can be done. http://plnkr.co/edit/L0TXx3DCBOJmh4XydXbV?p=preview

$stateProvider
        .state('contacts', {
            abstract: true,

        //my whole point is to get the id=1 here :(

        url: '/contacts/:id',
        templateUrl: function($stateParams){
            console.log("Did i get the child's parameter here? " + $stateParams.id)
            return 'contacts' + $stateParams.id + '.html'; //this will have a ui-view in it which will render its detail.
        }
    })

    .state('contacts.detail', {
        url: '/:id',
        // loaded into ui-view of parent's template
        templateUrl: 'contacts.detail.html',
        controller: function($scope, $stateParams){
          $scope.person = $scope.contacts[$stateParams.id];
        },
        onEnter: function(){
          console.log("enter contacts.detail");
        }
        })
    })

in view:

<a ui-sref="contacts.detail({id: 1})">My first contact<a>

Any help is deeply appreciated.

[timkindberg]

I don't think you'll be able to have two params named the same. You have :id in both the parent AND the child. Give them unique names.

[devaroop]

@timkindberg: That's wonderful and is working like a charm. Thanks for your quick reply and the perfect solution.

[Ema4rl]

Nice one!