Javascript 在单击节点AngularJS时，动态地将对应于特定节点的选项卡加载到视图中

我有十个节点，它们使用拖放进行编码，拖放后，单击节点时，我希望动态显示与节点对应的选项卡，因为并非所有节点都需要所有选项卡。现在，我将显示所有节点共用的控制器中的选项卡。。但我想显示每个节点对应的选项卡。 提前谢谢你的帮助

<div id="tabs" ng-controller="TabsCtrl" ng-hide="!IsVisible">
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabs" 
ng-class="{active:isActiveTab(tab.url)}" 
ng-click="onClickTab(tab)"><a>{{tab.title}}</a></li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>

---

您的代码段加载模板onclick，请参阅，那么您的确切预期行为是什么。？此加载一个节点的onclick，我希望列表根据正在单击的节点进行更新，列表元素根据每个节点的不同而变化

app.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [
{title: 'Item',url: 'item.html'},
{title: 'Bom',url: 'two.tpl.html'},
{title: 'Sourcing Rule',url:'three.tpl.html'},
{title: 'Item Attributes',url: 'one.tpl.html'},
{title: 'Categories',url: 'one.tpl.html'},
{title: 'Cross Refrences',url: 'one.tpl.html'},
{title: 'Effective Categories',url:'one.tpl.html'},
{title: 'DIN',url: 'one.tpl.html'},
{title: 'Coustomer Limit',url: 'one.tpl.html'},
{title: 'CICR',url:'one.tpl.html'}, 
{title: 'Co-Products',url:'one.tpl.html'},
{title: 'Org Assign',url: 'one.tpl.html'}];

$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function (tab) {
  $scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
  return tabUrl == $scope.currentTab;
}
}]);