Angular: Empty Fiddle

http://angularjs.org/

HTML

<script type="text/ng-template" id="static.tpl.html">
    Static route
</script>

<script type="text/ng-template" id="dynamic.tpl.html">
    Dynamic route
</script>

<script type="text/ng-template" id="default.tpl.html">
    Default route
</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.controller('MyCtrl', function($scope, $route) {
    
    $scope.defineRoute = function() {
        $route.routes['/dynamic'] = {templateUrl: 'dynamic.tpl.html'};
    };
});

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