Angular 1.6 NestedRoute (Single Page Application)

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>