在单个选项卡中显示数据，将下拉列表值传递给选定的选项卡

Question

我正在开发角度和引导应用程序。 请找到演示here

我有以下两个要求：

• 我有一个下拉列表，默认情况下选择了option1，我想 将所选选项的ID传递给选项卡控制器（tabsctrl）。
• 当用户点击Tab1时，应查看tab1数据和用户 点击Tab2，应查看tab2数据。

js code：

var myApp = angular.module('tabs', [ 'ui.bootstrap']);
myApp.controller('tabsctrl', function ($rootScope,$scope) {
          $rootScope.tabName ='MyTab Name';
          $rootScope.selectedDropDownValue="dummy";
          alert("selected dropdown value : " + $rootScope.selectedDropDownValue);
    $rootScope.tabValue="tab1Value";
    $scope.applicationData = {};
    $scope.activeModule = "Tab1";
    $scope.programModules=[{"tabName":"Tab1","tabValue":"tab1Value"},{"tabName":"Tab2","tabValue":"tab2Value"}];
    $scope.loadApplicationData = function(tabVal,tabName){
        $rootScope.tabName =tabName;
     alert("$rootScope.tabName :: "+$rootScope.tabName);
        $rootScope.tabValue=tabVal;
        $scope.activeModule = tabVal;

    }; 
    $scope.loadApplicationData($scope.activeModule,'Tab1');
});

myApp.controller('dropDownListCtrl',function Ctrl($rootScope,$scope) {  
    $scope.list_categories = {
        data: [{
            id: 'id1',
            name: 'option1'
        }, {
            id: 'id2',
            name: 'option2'
        }]
    };       
    $scope.list_category = 'id1';
});

html代码：

<div ng-controller="dropDownListCtrl">
    <select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">    

    </select>

    <p>$scope.list_category: {{list_category}}<p>

</div>
  <br><br>
<div ng-controller="tabsctrl">
 <div class="top-tabs">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" >
            <li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
                <a href="javascript:void(0)"  ng-click="loadApplicationData(pg.tabValue,pg.tabName)" >{{pg.tabName}}</a>
            </li>
        </ul>

         <div class="tab-content">

            <div role="tabpanel" class="tab-pane active" id="tab1">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                 Tab1 data
                            </div>asdsa
                            </div>
                            </div><div></div>
              <div role="tabpanel" class="tab-pane active" id="tab2">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                 Tab2 data
                            </div>asdsa
                            </div>
                            </div><div></div>  </div>
                            </div>

任何建议都会有所帮助。