Angular Material Nav Bar Set Default Active Item
<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>