title: how to call a function (or directive) only when tab is selected in angularjs?
body: <p>I'm new in angularjs, I have page with 2 tabs.I create tabs using directives, I use $http to get json from my server.my problem is I don't want to request my server until user decide to see my other tab. how can I do this?
  here is my directives : </p>
  
  <pre><code>var sdmtab = angular.module('sdmTab', []);
  
  sdmtab.directive('tab', function() {
  return {
      restrict: 'E',
      transclude: true,
      template: '&lt;div role="tabpanel" ng-show="active" ng-transclude&gt;&lt;/div&gt;',
      require: '^tabset',
      scope: {
          heading: '@'
      },
      link: function(scope, elem, attr, tabsetCtrl) {
          scope.active = false;
          tabsetCtrl.addTab(scope);
      }
  };
  });
  sdmtab.directive('tabset', function() {
  return {
      restrict: 'E',
      transclude: true,
      scope: {},
      templateUrl: 'app/components/directiveTemps/tabset.html',
      bindToController: true,
      controllerAs: 'tabset',
      controller: function() {
          var self = this;
          self.tabs = [];
          self.addTab = function addTab(tab) {
              self.tabs.push(tab);
              if (self.tabs.length === 1) {
                  tab.active = true;
              }
              self.select = function(selectedTab) {
                  angular.forEach(self.tabs, function(tab) {
                      if (tab.active &amp;&amp; tab !== selectedTab) {
                          tab.active = false;
                       }
                   });
  
                   selectedTab.active = true;
               };
           };
       }
    };
   });
  
  sdmtab.directive('teamsq', function() {
  return {
      restrict: 'E',
      scope: {},
      templateUrl: 'app/components/directiveTemps/teamSquad.html',
      bindToController: true,
      controllerAs: 'teamsq',
      controller: function($http, $log, userInfo) {
          var self = this;
          userInfo.then(function(answer) {
              var sid = answer.data.data.current_team.sid;
              var tid = answer.data.data.current_team.tid;
              self.team = [];
              self.bang = 'shirin';
              $http.get(webservice + "/team?token=" + token + "&amp;team_id=" + tid + '&amp;season_id=' + sid).success(function(response) {
                  var players = response.data.players;
                  angular.forEach(response.data.players, function(player) {
                      player['imageURL'] = "http://sdm.tarafdari.com/sites/default/files/players/150x150/" + player.pid + ".png";
                  });
                  self.team = response.data;
              });
          });
  
      }
  };
  });
  </code></pre>
  
  <p>here is my html :</p>
  
  <pre><code>&lt;tabset&gt;
    &lt;tab heading="Details"&gt;
         ...
     &lt;/tab&gt;
     &lt;tab heading="Other infos"&gt;
         &lt;teamsq&gt;&lt;/teamsq&gt;
     &lt;/tab&gt;
  &lt;/tabset&gt;
  </code></pre>
  
  <p>I want teamsq directive,only request when my 'other info' tab is selected.</p>