title: Angular Material and md-nav-bar routing
body: <p>I'm digging into Angular and have decided to use the Angular Material library to assist in my first application. So far I have some very basic code I copied from <a href="https://material.angularjs.org/1.1.0/demo/navBar" rel="nofollow noreferrer">https://material.angularjs.org/1.1.0/demo/navBar</a> which I have modified to fit my own needs. I'm having some trouble wrapping my head around routing and the md-nav-items. </p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;PRT - CIT&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" &lt;/meta&gt;
      &lt;!-- Angular Material style sheet --&gt;
      &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"&gt;
      &lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"&gt; &lt;/head&gt;
  
  &lt;body ng-app="MyApp" id="bootstrap-overrides"&gt;
      &lt;div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage main"&gt;
          &lt;md-content class="md-padding"&gt;
              &lt;md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"&gt;
                  &lt;md-nav-item md-nav-click="goto('queue')" name="queue"&gt;Queue&lt;/md-nav-item&gt;
                  &lt;md-nav-item md-nav-click="goto('detail')" name="detail"&gt;Detail&lt;/md-nav-item&gt;
                  &lt;md-nav-item md-nav-click="goto('request')" name="request"&gt;Request&lt;/md-nav-item&gt;
                  &lt;!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
            &lt;md-nav-item md-nav-sref="app.page4" name="page4"&gt;Page Four&lt;/md-nav-item&gt;
            &lt;md-nav-item md-nav-href="#page5" name="page5"&gt;Page Five&lt;/md-nav-item&gt;
            --&gt;&lt;/md-nav-bar&gt;
              &lt;div class="ext-content"&gt; External content for `&lt;span&gt;{{currentNavItem}}&lt;/span&gt;` &lt;/div&gt;
          &lt;/md-content&gt;
      &lt;/div&gt;
  
          &lt;script src="node_modules/angular/angular.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular-route/angular-route.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular-aria/angular-aria.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular-messages/angular-messages.js"&gt;&lt;/script&gt;
          &lt;script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"&gt;&lt;/script&gt;
          &lt;script src="node_modules/angular-material/angular-material.js"&gt;&lt;/script&gt;
          &lt;script src="js/site.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="/css/site.css"&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my JS:</p>
  
  <pre><code>(function () {
      'use strict';
      var MyApp = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngRoute']).controller('AppCtrl', AppCtrl);
  
      function AppCtrl($scope) {
          $scope.currentNavItem = 'queue';
      }
      MyApp.config(function ($routeProvider) {
          $routeProvider.when('/', {
              templateUrl: '/index.html'
              , controller: 'AppCtrl'
          }).when('/queue', {
              templateUrl: '/partials/queue.html'
              , controller: 'AppCtrl'
          }).when('/detail', {
              templateUrl: '/partials/detail.html'
              , controller: 'AppCtrl'
          }).when('/request', {
              templateUrl: '/partials/request.html'
              , controller: 'AppCtrl'
          });
      });
  })();
  </code></pre>
  
  <p>I'm kind of lost as to how I should route the tabs. From what I've read, md-nav-bar has some routing built in, but I've found examples utilizing ngRoute as well ui-router. </p>
  
  <p>I'm also confused as to actually populate my partial views in the </p>
  
  <pre><code>&lt;div class="ext-content"&gt; External content for `&lt;span&gt;{{currentNavItem}}&lt;/span&gt;` &lt;/div&gt; 
  </code></pre>
  
  <p>I tried using md-nav-href instead of md-nav-click but it just ended up redirecting me to the pages, not populating the content below my tabs/nav-bar; I rolled back the JS I had written and that part of the HTML. I've read the other questions posted in this area that I could find but none addressed rendering different partials based on nav-bar item. Any suggestions? I was thinking I could monitor currentNavItem and have the right partial render based on the value of it, but again, I'm not sure how to actually do the rendering.</p>
  
  <p><a href="https://plnkr.co/edit/1ZJu1hjt3brgQwOt1H9I" rel="nofollow noreferrer">Here</a> is a Plnker that doesn't render correctly in the preview for some reason, but the code is the same as what I have locally. </p>
  
  <p><a href="https://imgur.com/gallery/g1sYj" rel="nofollow noreferrer">Here</a> is an image of what it looks like running locally.</p>
  
  <p>Thanks in advance!</p>
  
  <p><strong>Final Edit:</strong> </p>
  
  <p>S/O to @Searching for helping me get it working below. I've updated the <a href="https://plnkr.co/edit/1ZJu1hjt3brgQwOt1H9I" rel="nofollow noreferrer">plnker link</a> to reflect the changes. Note it gets a little laggy due to the base append script. </p>