Angular $stateprovider Not Routing As Expected

In my main index.html file I have the following simple markup...

In my app.

Solution 1:

app.accounts is a child state of app. That means in menu.html there must be <ui-view> in order to display accounts.html.

If you don't want to display accounts.html inside menu.html, you shouldn't make accounts a child state of app:

<bodyng-app="starter"><divui-view></div></body>

and

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/app');
  $stateProvider

    .state('app', {
      url: '/app',
      templateUrl: 'templates/menu.html',
      controller: 'AppCtrl'
    })
    .state('accounts', {
      url: '/accounts',
      templateUrl: 'templates/accounts.html'
    })
});