Routing in angularjs material design

I am trying to figure out how to do routing between pages in angularjs material design.

In this example I would like to change the page when I click the sidebar link http://codepen.io/kyleledbetter/pen/gbQOaV

Script.js

// script.js

// create the module and name it scotchApp
    // also include ngRoute for all our routing needs
var starterApp = angular.module('starterApp', ['ngRoute']);

// configure our routes
starterApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
});

// create the controller and inject Angular $scope
starterApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

starterApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

starterApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

      

        
        
        
      

    

about.html

<div class="jumbotron text-center">
    <h1>About Page</h1>

    <p>{{ message }}</p>
</div>