angularjs - ui-router: passing in a param that not in the url?

I am having a problem passing in a param that's not a parameter in the url.

I basically have the following on a click event

let stateParams = {
    id: event.info.id,
    info: event.info

};

this.$state.go('home.showinfo', stateParams);

I have double checked on the stateParams contains the id and also the info object.

I then have the following setup on the state

.state('home.showinfo', {

    url: 'info/info/:id',
    resolve: {
        info: function($stateParams){
            return $stateParams.info;
        }
    },
    params: {
        info: null
    }

In my controller I am checking the value of $stateparams, and I see the id (also the URL contains the ID), but the info object is null. It's always null. I just want to be able to access it in the controller. Also "this.info" is also null.

I put a breakpoint in the resole and info is null.

I have tried removing the params:{} above and still nothing.

Any ideas what I am doing wrong?

Answer

There is a working plunker

The code should be working, check twice the calling side. These links will do what is expected:

There is a state as is above:

.state('home.showinfo', {

    url: 'info/info/:id',
    templateUrl: 'showinfo.tpl.html',
    resolve: {
        info: function($stateParams){
            return $stateParams.info;
        }
    },
    params: {
        info: null
    }

})

Check it here