UI Router stateParams not updating in child routes

Question

I had a route with a param working but then added some child routes and now it will not update.

Event Template

<a ui-sref="event.detail({id: event.id})" ng-repeat="event in events">
    Event {{event.id}}
</a>

UI Router

.state('event', {
    url: '/event',
    views: {
        'event': {
            template: ..., // shown above
            controller: 'Event'
        }
    }
})
.state('event.detail', {
    url: '/:id',
    views: {
        'event-detail': {
            template: ...,
            controller: 'EventDetail' // shows a single event
        }
    }
})
// tabs to switch between the different details
.state('event.detail.info', {
    url: '/info',
    views: {
        'event-info': {
            template: ...
        }
    }
})
.state('event.detail.map', {
    url: '/map',
    views: {
        'event-map': {
            template: ...
        }
    }
})
.state('event.detail.chat', {
    url: '/chat',
    views: {
        'event-chat': {
            template: ...
        }
    }
})

Controller

function EventDetail($scope, $stateParams) {
    $scope.getEventDetails = getEventDetails;

    $scope.getEventDetails($stateParams.id);

    function getEventDetails(id) {
        console.log(id); // returns correct first time, then nothing. Used to work every time!
        ...
    }
}

Run through of what's going wrong:

• click on Event 1
• url changes to event/1 and gets the right event details
• go back to list and click on Event 2
• url changes to event/2 but displays details for event 1
• click on the info, map or chat tab and the url changes from event/2 to event/1/info, event/1/map and event/1/chat

Answer 1

The solution was to user cache: false in the event.detail states and it's child states.