title: Connect dropdown links to specific tabs
body: <p>I am trying to connect links in a dropdown menu to a page with tabs, connecting their respective links to their respective tabs. Right now, the page that contains the dropdown menu and the page that contains the tabs are in separate HTML pages and have their own <code>ng-controller</code>.</p>
  
  <p>header_view.html</p>
  
  <pre><code>&lt;div role="navigation" ng-controller="HeaderController" xmlns="http://www.w3.org/1999/html" class="nav navbar navbar-default navbar-fixed-top ng-cloak"&gt;
      &lt;li class="mobile-hide dropdown"&gt;
          &lt;a href="#" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle usermenu"&gt;
              {{model.firstname}}
              &lt;div class="glyphicon glyphicon-menu-down small ml"&gt;&lt;/div&gt;
          &lt;/a&gt;
          &lt;ul role="menu" class="dropdown-menu"&gt;
              &lt;li class="arrow"&gt;&lt;/li&gt;
              &lt;li role="menuitem"&gt;
                  &lt;a href="#" ng-click="userPrefs()"&gt;Personal Information&lt;div class="glyphicon glyphicon-chevron-right"&gt;&lt;/div&gt;&lt;/a&gt;
                      &lt;div class="subtext"&gt;Update your email, phone number and mailing addresses.&lt;/div&gt;
              &lt;/li&gt;
              &lt;hr class="divider"/&gt;
              &lt;li role="menuitem"&gt;
              &lt;a href="#" ng-click="userPrefs()"&gt;Sign In &amp; Security&lt;div class="glyphicon glyphicon-chevron-right"&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;div class="subtext"&gt;Update your username, password and security question.&lt;/div&gt;
              &lt;/li&gt;
              &lt;hr class="divider"/&gt;
              &lt;li role="menuitem"&gt;&lt;a href="#" ng-click="userPrefs()"&gt;Account Preferences&lt;div class="glyphicon glyphicon-chevron-right"&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;div class="subtext"&gt;Indicate your email and postal mail preferences.&lt;/div&gt;
              &lt;/li&gt;
              &lt;div href="" ng-click="signout()" class="signout text-center"&gt;Sign Out&lt;/div&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>header.controller.js</p>
  
  <pre><code>angular.module('ogn.navTop').controller('HeaderController', ['$scope',
          function($scope) {
              $scope.userPrefs = function() {
                          console.log('ENV.name' + ENV.name);
                          $window.location.href = 'userprefs.html';
                      };
          }
  ]);
  </code></pre>
  
  <p>subnav.html</p>
  
  <pre><code>&lt;div ng-controller="UserprefsController" class="subnav-tabs"&gt;
      &lt;tabset&gt;
          &lt;tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"&gt;
              &lt;ng-include src="tab.content"&gt;&lt;/ng-include&gt;
          &lt;/tab&gt;
      &lt;/tabset&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>userprefs.controller.js</p>
  
  <pre><code>angular.module('ogn.userprefs').controller('UserprefsController', ['$scope',
      function($scope) {
          $scope.tabs = [
              { title: 'Personal Information', content: 'modules/userprefs/views/personalinfo.html'},
              { title: 'Sign In &amp; Security', content: 'modules/userprefs/views/signin_security.html'},
              { title: 'Account Preferences', content: 'modules/userprefs/views/accountprefs.html'}
          ];
  }]);
  </code></pre>
  
  <p>Is it recommended to put a controller into another controller (or would that even work)? How can I connect the dropdown links to the tabs if the page doesn't know the controller that can be used to call the tabs? I need to do this in pure Angular if possible. Thanks in advance!</p>