Routing issue with angular directives

I’m trying to setup one of my first angular projects and am having trouble getting to grips with the routing.

On page load I see the initial template that has been set by the preferencesDirective, which is great.

When I click the “Change Template” button I want it to change to another template but nothing happens. If I set the template url’s in the $routeProvider to something invalid then I see a 404 error in the debugger which tells me something must be working but nothing happens when the template url is valid.. How do I get it to change correctly?

Thanks.

<div id="PreferencesApp" class="" ng-app="clientPreferencesModule">    
    <preferences-directive factory-settings="clientPreferences"></preferences-directive>
    <a href="#Details">Change Template</a>
</div>


<script>

    var app = angular.module("clientPreferencesModule", ["ngResource", "ngRoute"]);
    //var app = angular.module("clientPreferencesModule", ["ngRoute"]);


    app.config(function ($routeProvider) {        
        $routeProvider.when("/", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' });
        $routeProvider.when("/Preferences/:id", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' });
        $routeProvider.when("/Preferences", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html' });
        $routeProvider.when("/Details", { controller: "clientPreferencesController", templateUrl: '/AngularTemplates/ClientPreferences/DetailsTemplate.html' });                
    });



    app.controller('clientPreferencesController', clientPreferencesController);

    clientPreferencesController.$inject = ["$scope", "$resource", "$rootScope", "$http", "$route", "$location"];

    function clientPreferencesController($scope, $resource, $rootScope, $http, $route, $location) {        
        this.model = @Html.Raw(JsonConvert.SerializeObject(Model));        
        $scope.location = $location.path();        
    }

    app.directive('preferencesDirective', preferencesDirective);

    function preferencesDirective() {

        return {
            restrict: 'EA',
            scope:
            {
                factorySettings: '='
            },
            controller: 'clientPreferencesController',
            controllerAs: 'pc',
            bindToController: true,
            templateUrl: '/AngularTemplates/ClientPreferences/PreferencesTemplate.html'
        }
    }

</script>

Source: AngularJS