navbar: active tab not selected with ui-router

[Liam-Tait]

Actual Behavior:

• What is the issue? * md-nav-bar / md-nav-item does not select an active tab based upon the current ui-router
• What is the expected behavior? When an md-nav-item links to the currently active route, that tab should be the selected tab by default. CodePen (or steps to reproduce the issue): *
• CodePen Demo which shows your issue: http://codepen.io/liamtait/pen/pPoZMY
• Details: When navigating to a route via a link, or refreshing the page after selecting a route, selected tab is not set to the current active tab Info gets lost on refresh and is never shown if the user follows a deep link. Leads to confusion and loss of place for the user.

navigating to http://s.codepen.io/liamtait/fullpage/pPoZMY?#/routeA does not select the routeA button

AngularJS Versions: *

• AngularJS Version: 1.5.11
• AngularJS Material Version: 1.1.3

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 57.0.2987.133 (64-bit)
• OS: * Windows 10
• Stack Traces:

---

Shortcut to create a new CodePen Demo. Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions. Add more lines if needed.

[stephengardner]

+1 !!!!

[benoitbc]

+1

[garretwilson]

I brought this up on Stack Overflow and someone came up with a reasonable manual workaround.

This is something that should be integrated into mdNavBar, though, and in fact the documentation makes it sound like it already supports this. But it's not.

[Paragonid]

I couldn't make it work by garretwilson example, but next setup helped:

<md-nav-bar md-selected-nav-item="$ctrl.currentNavItem" nav-bar-aria-label="navigation links">
        <md-nav-item ng-repeat="page in ::$ctrl.pages" md-nav-sref="{{::page.state}}" name="{{::page.name}}">{{::page.label}}</md-nav-item>
      </md-nav-bar>

And the controller (coffeescript):

panelController = (_, $timeout, $state, User, Routes) ->
  @pages = [
    state: Routes.tooltips
    name: 'tooltips'
    label: 'Helpers'
  ,
    state: Routes.events
    name: 'events'
    label: 'Events'
  ,
    state: Routes.users
    name: 'users'
    label: 'Users'
  ]

  $timeout =>
    @currentNavItem = _.find(@pages, state: $state.current.name).name

[mdehghani]

+1

[ThomasBurleson]

@EladBezalel - let's get this one fixed for v1.1.5; if possible.

[Logrythmik]

+1! 👍