Angular StateParams never changes when Url params change? - angularjs

Question

I am creating an Ionic app, and have a very basic routing scenario, I am trying to go to a detail page with an id param, which is optional.
Navigation occurs succesfully everytime, but when I try and access the value in the controller it remains the same as whatever the first time request was.
For e.g navigating to playlists/1 would output Object {playlistId: "1"} then when navigating to playlists/2 it would again output Object {playlistId: "1"}
I have tried so many things, but can't find the issue help appreciated.
My route setup looks like this:
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl',
resolve: {
playlistId: function($state, $stateParams) {
return $stateParams.playlistId; // note this changes every time. I put this here for testing.
}
}
}
}
})
And my controller:
.controller('PlaylistCtrl', function($scope, $stateParams) {
console.log($stateParams);
Navigating using:
<div class="card">
<div class="item item-text-wrap" ui-sref="app.single({playlistId: undefined})">
Test
</div>
</div>
<div class="card">
<div class="item item-text-wrap" ui-sref="app.single({playlistId: 1})">
Test 1
</div>
</div>
<div class="card">
<div class="item item-text-wrap" ui-sref="app.single({playlistId: 2})">
Test 2
</div>
</div>

Answer 1

It sounds like you're hitting the cache. You can disable it by adding cache:false to your state:
.state('app.single', {
cache: false, //add this
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl',
resolve: {
playlistId: function($state, $stateParams) {
return $stateParams.playlistId; // note this changes every time. I put this here for testing.
}
}
}
}
})