angularjs：这段示例代码逻辑上有点看不懂

Question

directive('tabs', function() { return {             restrict: 'E',             transclude: true,             scope: {},             controller: ["$scope", function($scope) {//为什么是数组呢："$scope"该怎么理解呢                 var panes = $scope.panes = [];                                 $scope.select = function(pane) {                     angular.forEach(panes, function(pane) {                         pane.selected = false;                     });                     pane.selected = true;                 }                 this.addPane = function(pane) {//这里的this该怎么解释，为什么能直接this.addPane呢                     if(panes.length == 0) $scope.select(pane);                     panes.push(pane);                 }             }],             template: '<div class="tabbable">' +                '<ul class="nav nav-tabs">' +                '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' +                '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +//ng-click="select(pane)"这里面的参数pane是从哪里来的呢，难道是ng-repeat里面可以直接定义，这里面可以直接传？                 '</li>' +                '</ul>' +                '<div class="tab-content" ng-transclude></div>' +                '</div>',             replace: true         };     }).     directive('pane', function() {        return {            require: '^tabs',//             restrict: 'E',             transclude: true,             scope: {                 title: '@'             },             link: function(scope, element, attrs, tabsCtrl) {                                  tabsCtrl.addPane(scope);//这里为什么传scope参数呢             },             template: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +//ng-class="{active: selected}"怎么理解呢                 '</div>',             replace: true         };     })