material design - Routing in angularjs materialdesign -

im trying figure out how routing between pages in angularjs material design.

in example, change page when click sidebar link http://codepen.io/kyleledbetter/pen/gbqoav

script.js

// script.js  // create module , name scotchapp     // include ngroute our routing needs var starterapp = angular.module('starterapp', ['ngroute']);  // configure our routes starterapp.config(function($routeprovider) {     $routeprovider          // route home page         .when('/', {             templateurl : 'pages/home.html',             controller  : 'maincontroller'         })          // route page         .when('/about', {             templateurl : 'pages/about.html',             controller  : 'aboutcontroller'         })          // route contact page         .when('/contact', {             templateurl : 'pages/contact.html',             controller  : 'contactcontroller'         }); });  // create controller , inject angular's $scope starterapp.controller('maincontroller', function($scope) {     // create message display in our view     $scope.message = 'everyone come , see how look!'; });  starterapp.controller('aboutcontroller', function($scope) {     $scope.message = 'look! page.'; });  starterapp.controller('contactcontroller', function($scope) {     $scope.message = 'contact us! jk. demo.'; }); 

about.html

<div class="jumbotron text-center">     <h1>about page</h1>      <p>{{ message }}</p> </div> 

have tried put href attribute in tag <a>?

<a href="#/">home</a> <a href="#/about">about</a> <a href="#/contact">contact</a> 

that way, whenever angularjs sees url change, trigger router find specified path.