Angular 1.6 NestedRoute (Single Page Application) - angularjs

Question

I am trying to have single page application in agularjs 1.6 using ngRoute.My code is as follows.
Angular Code
let mainAngularModule = angular.module("acc-management", ['ngMaterial','ngRoute']);
mainAngularModule.config(routeConfig);
routeConfig.$inject = ['$routeProvider'];
function routeConfig($routeProvider, $locationProvider) {
$routeProvider
.when('/Personaldata', {
templateUrl: 'PersonalPreference.html',
controller: 'PersondataController as personController'
})
.when('/UserData', {
templateUrl: 'UserDefinedElement.html',
controller: 'accountController as accController'
})
}
class AccountController {
static $inject = ["$scope"];
constructor(private $scope) {
debugger;
}
}
mainAngularModule.controller("accountController", AccountController);
mainAngularModule.controller("PersondataController", PersonalPreferencesController);
class PersondataController {
public scope: Object = {
title: "Personal Preferences"
}
}
class UserData {
}
HTML
<div layout="row" layout-xs="column">
<div flex="18">
<md-subheader class="md-no-sticky">User Preferences</md-subheader>
<md-list-item href="#/PersonalPreferences">
<span>Personal Preferences</span>
</md-list-item>
<md-list href="#/UserData">
<span>User Data</span>
</md-list>
</md-sidenav>
</div>
<div flex>
<md-content layout-padding>
<div ng-view></div>
</md-content>
</div>
</div>
My code is working fine for routing.In Userdata I have submenu's Address,Qualifications.I am not getting how should i write angular route code for it(nested routing).Below is my html code.
HTML
<div layout="row" layout-xs="column">
<div flex="18">
<md-list-item href="#/">
<span>Address</span>
</md-list-item>
<md-list href="#/">
<span>Qualifications</span>
</md-list>
</div>
</div>