title: In AngularJs, how do I identify a specific scope within a controller that is used multiple times on a page?
body: <p>I have an application that uses multiple tabs with a grid in each tab.  I have multiple pages using this same configuration.</p>
  
  <p>I have a single controller that works for all grids.  I would like to reuse this controller throughtout my application.</p>
  
  <p>My problem is that I am trying to lazy load the data for each tab until the tab is clicked.  What I can't figure out is how to tell the controller which scope belongs to which tab and ONLY get the data for that grid.  I know internally AngularJs does this because if I just load all the data for each tab at once I can click on my paginator, search, etc. for each tab and only that scope is updated.  </p>
  
  <p>I have ng-click setup for each tab and I can get my controller to fire when a tab is clicked.  However, the controller calls all instantiated scopes to load data for their respective grids.</p>
  
  <p>My approach may not be the best but it seems silly to create seperate controllers that do exactly the same thing.</p>
  
  <p>Note: Angular UI tabs with bootstrap is not an option.</p>
  
  <p>My view</p>
  
  <pre><code>&lt;div ng-app="TabsApp"&gt;
      &lt;div tabs&gt;
          &lt;div class="tabs"&gt;
              &lt;a ng-click="clickTab(0)" ng-class="{selected: selectedTab==0}"&gt;Localized Text From Server&lt;/a&gt;
              &lt;a ng-click="clickTab(1)" ng-class="{selected: selectedTab==1}"&gt;Localized Text From Server&lt;/a&gt;
              &lt;a ng-click="clickTab(2)" ng-class="{selected: selectedTab==2}"&gt;Localized Text From Server&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="tab-content"&gt;
              &lt;div ng-show="selectedTab==0" ng-init="init(@Model.UserId, 'useraddresses')" ng-controller="ListCtrl"&gt;@Html.Partial("_Grid0")&lt;/div&gt;
              &lt;div ng-show="selectedTab==1" ng-init="init(@Model.UserId, 'userphones')" ng-controller="ListCtrl"&gt;@Html.Partial("_Grid1")&lt;/div&gt;
              &lt;div ng-show="selectedTab==2" ng-init="init(@Model.UserId, 'usernotes')" ng-controller="ListCtrl"&gt;@Html.Partial("_Grid2")&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My app and factory url</p>
  
  <pre><code>var TabsApp = angular.module("TabsApp", ['ngResource', 'ngRoute']);
  
  TabsApp.factory('Api', function($resource){
      return $resource('/api/user/:userId/:ctrl', { userId: '@userId', ctrl: '@ctrl'});
  });
  </code></pre>
  
  <p>My controller - child scope(s)</p>
  
  <pre><code>var ListCtrl = function ($scope, $location, Api){
      $scope.search = function () {
          Api.get({
              userId: $scope.userId,
              ctrl: $scope.ctrl,
              q: $scope.query
              //etc.
              },
                  function(data){
                      $scope.items = data.items;
                      //other mapping
                  });
      };
  
      $scope.init = function(userId, ctrl){
          $scope.userId = userId;
          $scope.ctrl = ctrl;
      };
      $scope.reset = function(){
          $scope.items = [];
          $scope.search();
      };
  
      //kind of a hack but broadcasting was the only way I could figure out to listen for tab changes
      $scope.tabModelChange = { 'isChanged': false };
      $scope.$on('tabModelChange', function(event, args) {
          $scope.tabModelChange.isChanged = true;
          var activeTab = args.val[$scope.selectedTab];
          if (!activeTab.isLoaded) {
              $scope.reset();
          }
      }); 
  
      //filtering, sorting, pagination, etc.
  };
  </code></pre>
  
  <p>My directive: Parent scope</p>
  
  <pre><code>TabsApp.directive('tabs', function () {
      return {
          controller: function ($scope, $element) {
              $scope.selectedTab = 0;
              $scope.tabModel = [];
  
              //I use localized text and any number of tabs on my views from the server so the client wont know how many tabs each view will have
              var tabs = angular.element($element.children()[1]).children();
              angular.forEach(tabs, function (value, key) {
                  $scope.tabModel.push({'isLoaded' : false, 'isActive': false});
              });
              $scope.clickTab = function(tab) {
                  $scope.selectedTab = tab;
                  $scope.tabModel[$scope.selectedTab].isActive = true;
              };
              $scope.$watch('tabModel', function(newVal, oldVal) {
                  if (newVal !== oldVal) {
                      $scope.$broadcast('tabModelChange', { 'val': newVal });
                  }
              }, true);
          }
      };
  });
  </code></pre>
  
  <p>I suspect that when my controller receives a broadcast that the tab model has changed it calls $scope.reset with $scope being a parent scope which then traverses the child scopes looking for 'reset'.  Because there are 3 instances of ListCtrl, parent scope finds 3 child scopes with 'reset'. Hence, all the data gets loaded at once.  </p>
  
  <p>How can I get $scope.reset to match the tab that was clicked?  Thanks.</p>