Make work with angular JS ui with angular design of TABS materials

Question

TabControl is displayed when the application starts, but ...

When I click on the NO tab, the content is visible

How am I wrong?

I am using the latest angularJS 0.9.4 material design.

$urlRouterProvider.otherwise(""); $stateProvider .state("main", { abtract: true, url: '', views: { ' content@ ': { templateUrl: '../app/views/administration/administration.html', controller: 'AdministrationController' } } }) .state('main.settings', { url: '/settings', views: { ' settings@main ': { templateUrl: "../app/views/administration/settings.html", controller: 'GlobalConfigurationController' } } }) .state('main.schoolyears', { url: '/schoolyears', views: { ' schoolyears@main ': { templateUrl: "../app/views/schoolyear/schoolyears.html", controller: 'SchoolyearsController' } } }); 

HTML

 <div layout-fill layout="column"> <div ng-include="'app/components/navbar/navbar.html'"></div> <div id="content" layout="column" layout-padding> <md-tabs md-stretch-tabs="always" class="md-primary md-hue-2"> <md-tab label="Schoolyears" ui-sref="main.schoolyears" md-active="$state.is('main.schoolyears')"> <md-tab-body ui-view="schoolyears" layout="vertical" layout-fill></md-tab-body> </md-tab> <md-tab label="settings" ui-sref="main.settings" md-active="$state.is('main.settings')"> <md-tab-body ui-view="settings" layout="vertical" layout-fill></md-tab-body> </md-tab> </md-tabs> </div> </div> 

Answer 1

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

A workaround was posted on github, in a previous known md-tab issue :

There's a plunker with a workaround (it seems like it works without views):

  $stateProvider .state('tabs', { abstract: true, url: '/tabs', templateUrl: 'tabs.html', onEnter: function() { console.log("enter tabs.html"); } }) .state('tabs.tab1', { url: '/tab1', onEnter: function() { console.log("enter tab1.html"); }, controller: function($scope) { }, templateUrl: 'tab1.html' }) .state('tabs.tab2', { url: '/tab2', onEnter: function() { console.log("enter tab2"); }, controller: function($scope) { }, templateUrl: 'tab2.html' });