Make angularJS ui router work with angular material design TABS

Question

The TabControl is visible when the app starts but...

When I click on a tab NO content is visible

What do I wrong?

I use the latest angularJS material design 0.9.4.

   $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: the use of ui-sref and md-tabs was fixed in Angular Material 0.10.0

A workaround has been posted on github, on the previous known md-tab issue:

There's a plunker with the workaround (it seems to work without the 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'
      });