Menu navigation trouble with Ionic View

Question

First off: I am a total noob to Ionic. I am building my first app with it as a POC for my company. I am using Ionic View on my iPhone to check out what it looks like on a mobile device.

The problem I am running into is that, on my phone, when I am one level into my Menu, the app doesn't seem to want to navigate any further. In the browser (in my dev environment), however, it's doing fine. Any idea what I am missing?

The view I am having trouble with looks like this:

<ion-view view-title="About Us">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="aboutus in aboutuspage" href="{{aboutus.url}}" >
        {{aboutus.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

where aboutus is

.controller('AboutUsCtrl', function($scope) {
  $scope.aboutuspage = [
    { title: 'What is NYDA?', url: '#/app/aboutus/whatisnyda' },
    { title: 'NYDA Board', url: '#/app/aboutus/nydaboard' },
    { title: 'NYDA Executive Managers', url: '#/app/aboutus/nydaexecutivemanagers' },
    { title: 'NYDA Strategy', url: '#/app/aboutus/nydastrategy' },
    { title: 'Youth Employment Accord', url: '#/app/aboutus/youthemploymentaccord' }
  ];
})

I get to the About Us view by selecting it in the root of the menu. Then I get a list of views described by the aboutuspage array.

I specify the routes in my app.js as follows:

.state('app.aboutus', {
    url: "/aboutus",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus.html",
        controller: 'AboutUsCtrl'
      }
    }
  })    

  .state('app.aboutus_whatisnyda', {
    url: "/aboutus/whatisnyda",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus/whatisnyda.html",
          controller: 'AboutUsCtrl'
      }
    }
  })

  .state('app.aboutus_nydaboard', {
    url: "/aboutus/nydaboard",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus/nydaboard.html",
          controller: 'AboutUsCtrl'
      }
    }
  })

  .state('app.aboutus_nydaexecutivemanagers', {
    url: "/aboutus/nydaexecutivemanagers",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus/nydaexecutivemanagers.html",
          controller: 'AboutUsCtrl'
      }
    }
  })

  .state('app.aboutus_youthemploymentaccord', {
    url: "/aboutus/youthemploymentaccord",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus/youthemploymentaccord.html",
          controller: 'AboutUsCtrl'
      }
    }
  })

  .state('app.aboutus_nydastrategy', {
    url: "/aboutus/nydastrategy",
    views: {
      'menuContent': {
        templateUrl: "templates/aboutus/nydastrategy.html",
          controller: 'AboutUsCtrl'
      }
    }
  })  

Finally, my (simplified)folder structure looks as follows:

+-- project
+---- www
+------ templates
+-------- aboutus.html
+-------- AboutUs
+---------- NYDABoard.html
+---------- NYDAExecutiveManagers.html
+---------- NYDAStrategy.html
+---------- WhatISNYDA.html
+---------- YouthEmploymentAccord.html

Each of these views are pure text content at the moment. I also have 2 other views in the root of my menu (which do not have more views branching off of them), which are also pure text - and I can navigate to them fine.

Answer 1

Turns out Ionic is kinda picky about case sensitivity. According to my config I should have named the files in my AboutUs folder with all small caps, as follows

+-- project
+---- www
+------ templates
+-------- aboutus.html
+-------- aboutus
+---------- nydaboard.html
+---------- nydaexecutivemanagers.html
+---------- nydastrategy.html
+---------- whatisnyda.html
+---------- youthemploymentcccord.html

I haven't seen any documentation about this fact. I might have missed it, but it would have been nice if it was more obvious. I hope this answer spares someone else a couple of hours of head scratching...