A simple nested views from a menu

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? I

  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();
      });

http://stackoverflow.com/questions/29551650/how-to-make-a-menu-with-2-main-views-each-view-has-nested-views-within-it-angu