怎么将angularUI-bootstrap的taps控件和dropdown控件结合使用

Question

现在想将angularUI-bootstrap的taps控件和dropdown控件结合使用，点击菜单来切换面板里面的内容!
但是切换的时候，点击dropdown-menu里的第一个菜单有内容，第二个没有内容，而且再 切换回第一个菜单，无效

想要解决的问题，点击dropdown里面的菜单能正确的切换面板里的内容

目前自己写的代码，第一次点击菜单能切换，但是排版有误，第二次就无法切换了

我是这么写的

<tabset>
    <tab >
            <tab-heading class="dropdown cost-ctrl-tab-heading" active="tab.active">
                    <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">年审<span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
                        <li class=""><a href="#dropdownone" role="tab" id="dropdownone-tab" data-toggle="tab" aria-controls="dropdownone" aria-expanded="false">年审记录</a></li>
                        <li class=""><a href="#dropdowntwo" role="tab" id="dropdowntwo-tab" data-toggle="tab" aria-controls="dropdowntwo" aria-expanded="false">年审费用报销</a></li>
                    </ul>
            </tab-heading>
                <div role="tabpanel" class="tab-pane fade" id="dropdownone" aria-labelledby="dropdownone-tab">
                    <div tab-cost-ctrl-content ng-click="$event.stopPropagation();" tmp-id="{{tabTypeVerfi.id1}}"></div>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="dropdowntwo" aria-labelledby="dropdowntwo-tab">
                <div tab-cost-ctrl-content ng-click="$event.stopPropagation();" tmp-id="{{tabTypeVerfi.id2}}"></div>
      </div>
        </tab>
        <tab heading="公里数" class="cost-ctrl-tab-heading" active="tab.active">
          <div tab-cost-ctrl-content ng-if="tab.active" tmp-type="{{tabTypeKM.name}}" tmp-id="{{tabTypeKM.id}}"></div>
        </tab>
    </tabset>

js部分

.controller('TabCostCtrlController', function ($rootScope, $scope,$location,$translate,$filter, $stateParams, $state, $sce,$http,$modal,$log,localStorageService,Principal, Base) {
  $scope.tabTypeVerfi = {name:'tabCostCtrlTable',id1:'dropdownone',id2:'dropdowntwo'};
  $scope.tabTypeKM = {name:'tabCostCtrlTable',id:'tabTypeKM'};
})
.directive('tabCostCtrlContent', function ($rootScope, $templateRequest, $compile, $http, $sce, $state, $window, Base) {
      return {
        restrict: 'EA',
        replace: true,
        transclude:true,
        template: '<div></div>',
        link: function (scope, element, attr) {
          var tmpType = attr['tmpType'];
          var tmpId = attr['tmpId'];

          if(tmpId =="tabTypeKM" && tmpType == "tabCostCtrlTable") {
            $templateRequest('views/maintmp/' + tmpType + '.html')
              .then(function(tmphtml) {
                element.html($compile(tmphtml)(scope));
              });
          }
          if(tmpId =="dropdownone") {
            $templateRequest('views/maintmp/tpl-table2.html')
              .then(function(tmphtml) {
                element.html($compile(tmphtml)(scope));
              });
          }
          if(tmpId =="dropdowntwo") {
            $templateRequest('views/maintmp/tabCostCtrlTable.html')
              .then(function(tmphtml) {
                element.html($compile(tmphtml)(scope));
              });
          }
          var size = $('.dropdown-menu').find('.active').length;
          console.log(size)
        }
      }
  })
  .directive('tabTable', function ($rootScope, $templateRequest, $compile, $http, $sce, $state, $window, Base) {
        return {
          restrict: 'E',
          replace: true,
          template: '<div></div>',
          link: function (scope, element, attr) {

          }
        }
    });

点击年审记录第一遍，内容正常展示

点击年审费用报销 ，内容正常展示，但是样式不对，预期应该是在顶部的
图片描述

再切回年审记录，无法切换