How to defer routes definition in Angularjs?

defer routes definition in Angularjs

HTML

<script type="text/ng-template" id="static.tpl.html">
    Static route static
</script>
<script type="text/ng-template" id="dynamic.tpl.html">
    Dynamic route dynamic
</script>
<script type="text/ng-template" id="default.tpl.html">
    Default route default
</script>
<div ng-controller="MyCtrl">
    <ul>
        <li><a href="#/static">static route</a></li>
        <li><a href="#/dynamic">dynamic route</a></li>
    </ul>
    <button ng-click="defineRoute()">Define a route dynamically</button>
    <hr>
    <div ng-view></div>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.config(function($routeProvider) {
myApp.routeProvider = $routeProvider;

    $routeProvider.when('/static', {
        templateUrl: 'static.tpl.html'
    });
    $routeProvider.otherwise({templateUrl: 'default.tpl.html'});
});

myApp.controller('MyCtrl', function($scope, $route) {
    $scope.defineRoute = function() {
    console.log($scope.$parent);

  $route.templateUrl = 'dynamic.tpl.html';
    console.log($route);
       // $route.routes['/dynamic'] = {templateUrl: 'dynamic.tpl.html'};
    };
});