IONIC Partial View Not Showing

I am having an issue navigating to a partial view from the main view in ionic. I am doing everything according to the defined rules in ionic but I cannot seems to wrap my head around the issue yet.

My code is as follows;

The index.html:

<!DOCTYPE html>
 <html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
     <script src="lib/ionic/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
    <ion-nav-view></ion-nav-view>

    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="app/AppCtrl.js"></script>
    <script type="text/javascript" src="app/PartialCtrl.js"></script>

</body>

My menu.html file :

<ion-view>
<ion-content>
<ion-list fill-mnu-item>
      <ion-item  nav-clear  href="#app/partialview">HOME</ion-item>  
</ion-list>  
</ion-content>
</ion-view>

My app.js file :

angular.module('app.controllers',['ionic']);
angular.module('app', ['ionic', 'app.controllers'])

.run(['$ionicPlatform',function($ionicPlatform) {

 $ionicPlatform.ready(function() {
 // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
  // org.apache.cordova.statusbar required
  StatusBar.styleDefault();
}
});

}])
.config(['$stateProvider',   '$urlRouterProvider',function($stateProvider,$urlRouterProvider) {

$stateProvider.state('app', {
url: "/app",
templateUrl: "app/menu.html",
controller: 'AppCtrl as vm'
 });

 $stateProvider.state('app.partialview', {
    url: "/partialview",
    views: {
        'menuContent': {
        templateUrl: "app/partials/partialview.html",
        controller: 'PartialCtrl as vm'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app');
    }]);

My AppCtrl controller file :

 //App Controller 
(function(){
  'use strict';

  angular.module('app').controller('AppCtrl',AppCtrl);

  AppCtrl.$Inject = ['$scope','$ionicModal','$timeout','$state'];

  function AppCtrl($scope, $ionicModal, $timeout,$state){

   console.log ("App Controller Initialed ---> ");


   }

   })();

My PartialCtrl.js Controller file :

(function (){

 'use strict';
  angular
  .module('app')
  .controller('PartialCtrl',PartialCtrl);

  PartialCtrl.$inject = ['$scope'];


  function PartialCtrl($scope){
     var vm = this;
     console.log("PartialCtrl Initiated -->");


  }

})();

All I want to do is simply goto partialview.html when I click on the link on the menu.html file.

Could someone please let me know what I am doing wrong ?.

My file structure is as shown below :

enter image description here you could find the complete source code here. Could someone please help me out ?.

In your app.js, you say this :

$stateProvider.state('app.partialview', {
      url: "/partialview",
      views: {
            'menuContent': {
            templateUrl: "app/partials/partialview.html",
            controller: 'PartialCtrl as vm'
          }
        }
      });

The views property means that you have a nested view in your view. So you must have 2 ion-nav-view. One for all the content, and one for your partial view.

So the solution is : simply add an ion-nav-view in your menu.html and that's it ! Like this :

<ion-nav-view name="menuContent"></ion-nav-view>

The name must be the same that you put in app.js file. If you want more information about views and routing, you should take a look at ui-router doc. If you want an example on ionic apps with nested views you can take a look at ionic starter tabs template