How to make a menu with 2 main views, each view has nested views within it? AngularJS and ionic

I have a simple app structure that looks like below and I want to make a menu that will navigate between these folders.

  -App
      - About
      - Pets
            - Details
            - Share
      - User
            - Details
            - AccountSettings
            - Other
      - Adopt

I can arrive to the first directory as in User/ but I can't navigate to the
sub-directory. I am missing something with routing or maybe menuContent should not be used?

angular.module('app.pets', [
    'app.pets.details'
])

 .config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
     .state('app.pet-index', {
        url: '/pets',
        views: {
          'menuContent': {
               templateUrl: 'app/pets/pets.html',
               controller: 'PetIndexCtrl'
            }
        }
    });
   })

   .controller('PetIndexCtrl', function($scope, PetService) {
       $scope.pets = PetService.all();
   });