Sidemenu loses track of current state after 9 transitions


This seems very weird, and I am willing to admit that it might be user error, but if it is, I cannot see how.

I have a bare bones app I just created from the sidemenu starter. The only thing I have done is add more menu items, and corresponding templates and controllers. I have a total of 9 menu items in menu.html. If I open the menu and select an item it works correctly, for the first 9 attempts. After that the state gets completely messed up. The header shows the title of one view and the content of a completely different view is displayed and neither is necessarily for the menu item I selected. The browser hash changes correctly. Note that it does not matter what order I select the menu items in. I have tried this at least 10 times with quasi-random selection ordering and it fails every time on the 9th selection.

I have to admit that the failure point and the number of menu items is a bit too much of a coincidence, but I have looked at the state configuration, each of the views, and each of the controllers and everything seems to be in order. The only thing I am doing that might be a little uncommon is that I am reusing the same template across different views. So my state configuration has entries that look like this:

       .state('app.toprated', {
            url: "/toprated",
            views: {
                'menuContent': {
                    templateUrl: "templates/booklist.html",
                    controller: 'TopRatedCtrl'
        .state('app.mostreviews', {
            url: "/mostreviews",
            views: {
                'menuContent': {
                    templateUrl: "templates/booklist.html",
                    controller: 'MostReviewsCtrl'

An example of one of the controllers is as follows (they are literally all exactly like this except for the controller name and currentView title):

    .controller('MostReviewsCtrl', function($rootScope) {
        $rootScope.currentView = 'Most Reviews';


And the shared template looks like this:

<ion-view view-title="{{currentView}}">
            <ion-item ng-repeat="book in books" href="#/app/book/{{}}">

I have seen it fail on that 9th selection regardless of whether a view using the shared template is selected or one of the few other views that has its own template. This does not make any sense and I refuse to believe that there’s a 9-click limit. :slight_smile: I should add that once it breaks, it’s completely busted, there’s no recovering by selecting a different menu item. The URL hash changes but absolutely nothing happens in the view. It’s like the whole state machine just fell on the floor.

Any thoughts on this?



Could you build a codepen to reproduce it?


That sounds like it might be a caching issue. By default, Ionic will cache a maximum of 10 views (as per

Have you tried with caching off? has details on how to disable it globally or per-state.


Bingo! I turned off caching globally and now I can no longer reproduce this behavior. Thanks!