ui-sref not not triggering state transition in url with parameterized id

In my app.js file, I have two states for the menu. The parent state is essentially a list, while the child state is a detailed view with an ID parameter in the URL string.

.state('menu', {
    url: '/menu',
    views: {
       'menu': {
          templateUrl: 'views/menu.list.html',
          controller: 'MenuCtrl',
       }
    }
})
.state('menu.details', {
   url: '/details/:menuItemId',
   templateUrl: 'views/menu.details.html',
   controller: 'MenuDetailCtrl',
   resolve: {
      menuItemId: ['$stateParams', function($stateParams) {
         return $stateParams.menuItemId;
      }]
   }
});

In my markup, this is the HTML I have to trigger the state change:

<button class="button button-positive" ui-sref="menu.details({menuItemId: item.objectId})">
   Details, yo.
</button>

The issue I am having is that when I click the button, the URL changes as expected:

/#/menu/details/E0mW91ZuOp

But the page does not transition to the menu.details.html template. Can anyone offer an explanation as to why this is happening?

EDIT: Here is the full contents of the parent template HTML

<ion-view title="Menu">
    <ion-content class="padding">
        <h2>{{pizze.name}}</h2>
        <ion-list ng-repeat="item in pizze.items">
            <ion-item>
                <span class="input-label">{{item.name}}</span>
                <button class="button button-positive" ui-sref="tabs.menu.details">
                    Details, yo.
                </button>
            </ion-item>
        </ion-list>    
    </ion-content>
</ion-view>

Here is the child template HTML

<ion-view title="Menu Details">
    <ion-content class="has-header padding">
        <h1>Such details. Wow.</h1>
    </ion-content>
</ion-view>

From my previous comment: if one route is a child of another route, it will inherit the template.
So, to fix your problem, you have two options:

  1. add a ui-view (or ion-view, I don't remember how Ionic deals with this) into your parent template: the child template will be loaded inside this tag

parent.html

    <div>
       <h1>Your parent view</h1>
       <div ui-view></div>
    </div>

child.html

    <div>
       <h1>Your child view</h1>
    </div>
  1. change the state of the child route, to make it sibling of the other one instead

JS

   $stateProvider
      .state('menu', { /* your configuration */ })
      .state('menu-details', { /* your configuration */ });

Have a look at this example from Ionic about how to handle nested views.