通过单击链接（bootstrap + angularjs2）在tab2上显示tab1结果

Question

以下是我尝试使用bootstrap模式实现的目标。

1. 当用户点击某个按钮时，会打开一个带有多个标签的模式
2. tab1包含链接，如果用户点击链接，它应该在tab2上显示其结果（即子链接）
3. 如果用户点击tab2子链接，那么结果应该显示在tab3 ....（我将在稍后实现）

这是我的代码：

＆＃13;
＆＃13;
ngular.module('app')
    .controller('MainCtrl', ['$scope', 'Link', '$document', '$http', function($scope, Link, $document, $http) {
        $scope.list_links = function() {
            $scope.links = [];
            $scope.showLoading = true;
            $scope.showSlinkList = false;
            $scope.showLinkList = true;
            $scope.linkPromise = Link.query().$promise.then(function(resp) {
                $scope.links = resp;
                $scope.showLoading = false;
            });
            

        $scope.loadSlinks = function(linkId) {
            $scope.slinks = []
            $scope.showLinkList = false;
            $scope.showLoading = true;
            $scope.showSlinkList = true;
            $scope.linkId = linkId;
            $scope.slinkPromise = $http.get('/api/links/' + linkId + '/slinks').then(function(resp) {
                $scope.showLoading = false;
                $scope.slinks = resp.data;
            });
        };
    }]);
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Links">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="Links" tabindex="-1" role="dialog" aria-labelledby="LinksLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>

                </button>
                 <h4 class="modal-title" id="myModalLabel">Your Links</h4>

            </div>
            <div class="modal-body">
                <div role="tabpanel">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#chooseAlink" aria-controls="browseTab" role="tab" data-toggle="tab">Choose A Link</a>

                        </li>
                        <li role="presentation"><a href="#chooseAsublink" aria-controls="browseTab" role="tab" data-toggle="tab" >Choose A Sub-Link</a>

                        </li>
                    </ul>
                    <!-- Tab panes -->	
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="chooseAlink">

                        	<div ng-show="showLinkList" class="container text-center how-works" ng-class="{loading: showLoading}">
								<div class="row">
									<div class="col-sm-6">
									<a ng-repeat="link in links" ng-click="loadSublinks(link.id)" class="col-xs-4">
									
										<div>{{link.name}}</div>
									</a>
									</div>
									
								</div>
								<div cg-busy="{promise:brandPromise}"></div>
								
							</div>




                        
                        <div role="tabpanel" class="tab-pane" id="#chooseAsublink">

							<div ng-show="showSubLinkList" class="container text-center how-works" ng-class="{loading: showLoading}">
								<div class="models row">
									<div class="col-sm-6">
									<a ng-repeat="slink in slinks" class="col-xs-2" ng-href="/links/{{linksId}}/slinks/{{item.id}}/items">
										<div>{{slink.name}}</div>
									</a>
								</div>
								</div>
							</div>
							</div>



							</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Next</button>
            </div>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我已经使用制表符创建了上面的模式但是无法将tab1结果移动到tab2。请帮助我如何实现这一目标。也不知道如何使用Next＆amp;后退按钮可在标签之间切换而不会丢失tab1数据。