Angular Material and md-nav-bar routing not working

Question

I'm working into AngularJS and have decided to use the AngularJS Material library to assist in my first application. So far I have some very basic code I copied from https://material.angularjs.org/latest/demo/navBar which I have modified to fit my own needs. I'm having some trouble wrapping my head around routing my code is below please help me some one else

.js

var routerApp = angular.module('routerApp', ['ui.router','ngMaterial', 'ngMessages']);

routerApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        .state('home', {
            url: '/home',
            templateUrl: 'templates/home.html',
            controller:'HomeController'
        })

         // nested list with custom controller
         .state('home.page1', {
            url: '/page1',
            templateUrl: 'templates/page1.html',
            controller: function ($scope) {
                $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
            }
        })

        // nested list with just some random string data
        .state('home.page2', {
            url: '/page2',
            templateUrl: 'templates/page2.html',
            //template: 'I could sure use a drink right now.',
            controller: function ($scope) {
                $scope.paragraphs = ['paragraph1', 'paragraph2', 'paragraph3'];
            }
        })

});

home.html

<div layout="column" ng-cloak>
    <md-content class="md-padding">
        <md-nav-bar md-no-ink-bar="disableInkBar"
                    md-selected-nav-item="currentNavItem"
                    nav-bar-aria-label="navigation links">
            <md-nav-item md-nav-href=".page1" name="page1">
                Page One
            </md-nav-item>
            <md-nav-item md-nav-href=".page2" name="page2">
                Page Two
            </md-nav-item>
            <md-nav-item md-nav-href=".page1" name="page1">
                Page Three
            </md-nav-item>
            <md-nav-item md-nav-href=".page2" name="page2" disabled>
                Page Four
            </md-nav-item>
        </md-nav-bar>
        <div ui-view></div>
    </md-content>
</div>

HomeController:

routerApp.controller('HomeController', function ($scope, $location,$state) {
   $scope.goto = function(page) {
    $state.go(page);
  };
});

Answer 1

You might try with md-nav-sref

md-nav-sref is used as Ui-router state to transition to when this link is clicked

<md-nav-item md-nav-sref="#!/page1" name="page1">
                Page One
</md-nav-item>