title: Angular Material Nav Bar Set Default Active Item
body: <p>I am experimenting with an angular app using <a href="https://material.angularjs.org/latest/" rel="noreferrer">Angular Material</a> and cannot seem to get my navbar to set the default item to be selected. I am using the <a href="https://material.angularjs.org/latest/demo/navBar" rel="noreferrer">Angular Material Navbar</a> (<a href="https://material.angularjs.org/latest/api/directive/mdNavBar" rel="noreferrer">Directive Info</a>) for displaying my views and here is my template html for the navbar:</p>
  
  <pre><code>&lt;!-- Navbar --&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-sref="layout.home" name="home"&gt;Home&lt;/md-nav-item&gt;
      &lt;md-nav-item md-nav-sref="layout.gallery" name="gallery"&gt;Gallery&lt;/md-nav-item&gt;
      &lt;md-nav-item md-nav-sref="#" name="page3"&gt;Page Three&lt;/md-nav-item&gt;
    &lt;/md-nav-bar&gt;
  &lt;/md-content&gt;
  </code></pre>
  
  <p>In my controller, I am setting up the currentNavItem to 'home' which should correspond to my md-nav-item named home which I felt should set it to be selected based on <code>md-selected-nav-item="currentNavItem"</code></p>
  
  <pre><code>export default class HeaderController {
    constructor($log) {
      Object.assign(this, {
        $log,
      });
      this.currentNavItem = 'home';
    }
  
    $onInit() {
      this.$log.debug('HeaderController.$onInit');
      this.$log.debug(this.currentNavItem);
    }
  }
  </code></pre>
  
  <p>Any help would be appreciated as to why this doesn't make my list item selected by default when I load the app.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>The issue in my case was that my controller was not being used in the navbar selection `md-selected-nav-item="$ctrl.currentNavItem"'. Adding values for each md-nav-item didn't seem to affect the active item setting.</p>