title: showing data in individual tabs, passing dropdown list value to the tab selected
body: <p>I am working on angular and bootstrap application.
  Please find the demo <a href="http://plnkr.co/edit/CfTrnfCAt09eDtLGDW6P?p=preview" rel="nofollow noreferrer">here</a></p>
  
  <p>I have the below two requirements:</p>
  
  <ul>
  <li>I have a dropdown list, by default option1 is selected, i want to
  pass the id of the option selected to the tab controller(tabsctrl).</li>
  <li>When user click on Tab1, tab1 data should be viewed and when user
  click on Tab2, tab2 data should be viewed.</li>
  </ul>
  
  <p>js code:</p>
  
  <pre><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';
  });
  </code></pre>
  
  <p>html code:</p>
  
  <pre><code>&lt;div ng-controller="dropDownListCtrl"&gt;
      &lt;select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data"&gt;    
  
      &lt;/select&gt;
  
      &lt;p&gt;$scope.list_category: {{list_category}}&lt;p&gt;
  
  &lt;/div&gt;
    &lt;br&gt;&lt;br&gt;
  &lt;div ng-controller="tabsctrl"&gt;
   &lt;div class="top-tabs"&gt;
          &lt;!-- Nav tabs --&gt;
          &lt;ul class="nav nav-tabs" role="tablist" &gt;
              &lt;li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules"&gt;
                  &lt;a href="javascript:void(0)"  ng-click="loadApplicationData(pg.tabValue,pg.tabName)" &gt;{{pg.tabName}}&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
           &lt;div class="tab-content"&gt;
  
              &lt;div role="tabpanel" class="tab-pane active" id="tab1"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-12"&gt;
                          &lt;div class="panel panel-primary"&gt;
                              &lt;div class="panel-heading"&gt;
                                   Tab1 data
                              &lt;/div&gt;asdsa
                              &lt;/div&gt;
                              &lt;/div&gt;&lt;div&gt;&lt;/div&gt;
                &lt;div role="tabpanel" class="tab-pane active" id="tab2"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-12"&gt;
                          &lt;div class="panel panel-primary"&gt;
                              &lt;div class="panel-heading"&gt;
                                   Tab2 data
                              &lt;/div&gt;asdsa
                              &lt;/div&gt;
                              &lt;/div&gt;&lt;div&gt;&lt;/div&gt;  &lt;/div&gt;
                              &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestions would be helpful.</p>