Guias angulares de inicialização da interface do usuário não renderizando a visualização da interface do usuário

Estou atualizando um aplicativo angular existente para todas as versões mais recentes do angular (v1.2.13), ui-router (v0.2.8) e ui-bootstrap (v0.10.0).

Eu tenho visões aninhadas que possuem várias visões nomeadas. Uma das visualizações nomeadas possui guias. Eu costumava ser capaz de definirui-views dentro de cada guia, mas que não está mais funcionando. Se eu não usar as guias, as visualizações nomeadas serão renderizadas corretamente.

Eu criei umplunkr para mostrar o que estou vendo.

Aqui está a minha configuração de estado._split.html tem 3 visualizações nomeadas:TOP, MIDDLEeBOTTOM. TOP eMIDDLE ambos têm vistas nomeadasLEFT eRIGHT. TOP possui guias e não renderiza as visualizaçõesLEFT ouRIGHT. MIDDLE tem as mesmas visualizações nomeadas e são renderizadas corretamente.

  $stateProvider
      .state("foo", {
        abstract: true,
          url: "/foo",
          templateUrl: '_split.html',
      })
      .state("foo.view", {
        abstract: true,
        url: '',
        views: {
          'TOP': {
            template: '_tabs.html'
          },
          'MIDDLE': {
             templateUrl: '_tabs2.html'
          },
          'BOTTOM': {
            template: '<h2>Bottom</h2>'
          }
        },
      })
      .state("foo.view.tabs", {
        url: '',
        views: {
          'LEFT': {
            template: '<h3>Left</h3>'
          },
          'RIGHT': {
            template: '<h3>Right</h3>'
          }
        }
      })

Existe alguma maneira de renderizar a interface do usuário dentro das guias?

questionAnswers(2)

yourAnswerToTheQuestion