Angular Tab Material + ui-router: the case does not load

Question

Update : using ui-sref and md-tabs been fixed in Angular Material 0.10.0

First of all, we are aware of several issues like this. However, we tried for several hours, and still have no luck, so let's see if someone can shed some light on this particular case.

We are trying to have two tabs with two different views with two different controllers.

The tabs look great, they work, and the URL changes when the tabs change, but the body tab never loads.

ui-sref is defined in a range to avoid https://github.com/angular/material/issues/2344

Module configuration

  function testRouteConfig($stateProvider) { $stateProvider .state('testTabs', { abstract: true, url: '/test/tabs', templateUrl: 'modules/test/test.html', controller: 'TestController as vm' }) .state('testTabs.testMain', { url: '/test/main', data: { 'selectedTab': 0 }, views: { 'testMain': { templateUrl: 'modules/test/main/mainTest.html', controller: 'MainTestController as vm' } } }) .state('testTabs.testAbout', { url: '/test/about', data: { 'selectedTab': 1 }, views: { 'testAbout': { templateUrl: 'modules/test/about/aboutTest.html', controller: 'AboutTestController as vm' } } }); } 

Definition Tab (test.html)

 <md-tabs md-selected="currentTab" md-stretch-tabs="always" class="main-toolbar"> <md-tab> <md-tab-label><span ui-sref="testTabs.testMain">Profile</span></md-tab-label> <md-tab-body ui-view="testMain" layout="vertical" layout-fill></md-tab-body> </md-tab> <md-tab> <md-tab-label><span ui-sref="testTabs.testAbout">About</span></md-tab-label> <md-tab-body ui-view="testAbout" layout="vertical" layout-fill></md-tab-body> </md-tab> </md-tabs> 

Main controller

 'use strict'; TestController.$inject = ['$scope']; function TestController($scope) { $scope.$on('$stateChangeSuccess', function (event, toState) { $scope.currentTab = toState.data.selectedTab; }); } module.exports = TestController; 

Tab Example

 <p>{{vm.title}}</p> 

Tab controller

 'use strict'; AboutTestController.$inject = []; function AboutTestController() { var vm = this; vm.title = 'About Test page'; } module.exports = AboutTestController; 

Answer 1

Firstly, I think your routes are not the way you want. The substation URL (state.substate) will be added to the status URL. The URL of your state 'testTabs.testMain' will be /test/tabs/test/main' . If you want it to be absolute, you must add a ^ : ^/test/main . Or just make it relative by removing the /test header.

If this does not do the trick, try naming absolutely:

 views: { ' testMain@testTabs ': { templateUrl: 'modules/test/main/mainTest.html', controller: 'MainTestController as vm' } }