ionic pushing a view within a side menu

I have a side menu:

<ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 id="menu-title" class="title">John Doe</h1>
    </ion-header-bar>

    <ion-content id="menu-content">
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/account" class="menu-item">
          account
        </ion-item>

When the app opens, I am automatically sent to the accounts page. I can easily click the "hamburger" to get to the slide out navigation where there are several other pages to I can access. From the account page, there is a list of accounts. I am having trouble "drilling-down" into a detailed view of account. The side menu is defined in menu.html. Here are the routes:

.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('app', {
                url: '/app',
                abstract: true,
                templateUrl: 'templates/menu.html',
                controller: 'AppCtrl'
            })
            .state('app.accounts', {
                url: '/accounts',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/account.html'
                    }
                }
            })
            .state('app.accounts/accountId', {
                url: '/accounts/accountId',
                views: {
                    'menuContent': {
                        templateUrl: 'templates/account-detail.html'
                    }
                }
            })
$urlRouterProvider.otherwise('/app/home');

The third state is not working. What would the name (currently menuContent) be? How would I properly route this from the context of a side menu? What would the link look like in the account list page? something like:

<a href="#/accounts/myid">view account</a>

The resulting view config is something like below:

enter image description here

Note that the user should not be able to go from account back to menu. They will need to hit a 'back' button then go to the menu. Pretty standard in mobile apps.

There problem is how you defined the last route. The problem is with this line /accounts/accountId. The route would only be displayed if the URL matches that exact same URL string. If you want to grab the value after the / and use it in the controller, do this:

.state('app.account', 
    url: '/accounts/{accountId}', //you can get the value of after the `/` in your controller using the `$stateParams` object.
    views: {
    menuContent': {
     templateUrl: 'templates/account-detail.html'
    }
  }
});

I think two changes need to be done one for the state name and second for the url

  1. Change state name .state('app.accounts/accountId', to .state('app.account-detail',

  2. Change the url from url: '/accounts/accountId' to url: '/accounts/{accountId}'

    .state('app.account-detail', 
    url: '/accounts/{accountId}', //you can get the value of after the `/` in your controller using the `$stateParams` object.
    views: {
     menuContent': {
     templateUrl: 'templates/account-detail.html'
     }
    }
  });

The state name can have a dot representation in it to show parent.child, but I doubt parent.child/something is allowed. That's the reason, no routing is matched and its considering the default one with $urlRouterProvider.otherwise('/app/home')

The href should the pass the appropriate id associated with the account item bound. something like this < a href ="#/accounts/{{account.id}}"> the exact feature implementation is given in the tabs template application of ionic. try creating a new project with this ionic start <your-app-name> tabs then look at the app.js for understanding how to define routes and tab-chats.html under templates folder for understanding how to specify href