<div ng-controller="TabsDemoCtrl">
    <tabs>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
            <div ng-include="pane.template"></div>
        </pane>
    </tabs>
</div>

var TabsCtrl = function ($scope) {
  $scope.panes = [
    { title:"Events list", template:"/path/to/template/events" },
    { title:"Calendar", template:"/path/to/template/calendar" }
  ];
};

<tabs>
    <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
        {{pane.content}}
    </pane>
</tabs>

$scope.active = function() {
    return $scope.panes.filter(function(pane){
      return pane.active;
    })[0];
};

<tab active="tabActivity[0]">...</tab>
 <tab active="tabActivity[1]">...</tab>

$scope.tabActivity=[false,false];

$scope.tabActivity.indexOf(true)

$("#youTabIdHere> ul > li > a").on("click", function(evt){
   console.log(evt);
});

$scope.active = function() {
  if ($scope.panes) {
    var i;
    for (i=0;i<$scope.panes.length;i++) {
      if ($scope.panes[i].active) {
          return i;
      }
    }
  }
};

$scope.$watch('active()', function(paneIndex) {
  if (paneIndex != undefined) {
    var pane = $scope.panes[paneIndex];
    $scope.tabHandler(pane); // this would be your function on change
  }
});