title: AngularJS: how to watch tab selection?
body: <p>I am using angularjs tab and pane example components</p>
  
  <pre><code>angular.module('components', []).
      directive('tabs', function() {
          return {
              restrict: 'E',
              transclude: true,
              scope: {},
              controller: function($scope, $element) {
                  var panes = $scope.panes = [];
  
                  $scope.select = function(pane) {
                      angular.forEach(panes, function(pane) {
                          pane.selected = false;
                      });
                      pane.selected = true;
                  }
  
                  this.addPane = function(pane) {
                      if (panes.length == 0) $scope.select(pane);
                          panes.push(pane);
                      }
                  },
                  template:
                      '&lt;div class="tabbable"&gt;' +
                          '&lt;ul class="nav nav-tabs"&gt;' +
                              '&lt;li ng-repeat="pane in panes" ng-class="{active:pane.selected}"&gt;'+
                                  '&lt;a href="" ng-click="select(pane)"&gt;{{pane.title}}&lt;/a&gt;' +
                              '&lt;/li&gt;' +
                          '&lt;/ul&gt;' +
                          '&lt;div class="tab-content" ng-transclude&gt;&lt;/div&gt;' +
                      '&lt;/div&gt;',
                  replace: true
              };
          }).
      directive('pane', function() {
          return {
              require: '^tabs',
              restrict: 'E',
              transclude: true,
              scope: { title: '@' },
              link: function(scope, element, attrs, tabsCtrl) {
                  tabsCtrl.addPane(scope);
              },
              template:
                  '&lt;div class="tab-pane" ng-class="{active: selected}" ng-transclude&gt;' +
                  '&lt;/div&gt;',
              replace: true
          };
      })
  </code></pre>
  
  <p><strong>SomePage.html</strong></p>
  
  <pre><code>&lt;tabs&gt;
      &lt;pane title="Datos Generales"&gt;
          &lt;div ng-include src="'/resources/js/page/running/admin/templates/update-data.html'"&gt;&lt;/div&gt;
      &lt;/pane&gt;
      &lt;pane title="Localización"&gt;
          &lt;div ng-include src="'/resources/js/page/running/admin/templates/update-location.html'"&gt;&lt;/div&gt;
      &lt;/pane&gt;
      &lt;pane title="Datos Contacto"&gt;
          &lt;div ng-include src="'/resources/js/page/running/admin/templates/update-contacts.html'"&gt;&lt;/div&gt;
      &lt;/pane&gt;
      &lt;pane title="Variantes"&gt;
          &lt;div ng-include src="'/resources/js/page/running/admin/templates/update-variants.html'"&gt;&lt;/div&gt;
      &lt;/pane&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p>In the second pane there is a GoogleMap. I would like to refresh the google map when the second pane is selected.</p>
  
  <p>I don't know how to get selected pane in the controller. I've tried <code>$scope.panes</code> but is <code>undefined</code></p>