如何在uib-tab外显示选定的值

Question

我有Bootstrap Ui选项卡，即控制器中Array对象的加载值。 这就是我想要做的。 当用户点击选项卡时，我想在DIV上显示值（uib-tab的外侧），它应该来自控制器。

目前它在uib-tab旁边工作并在底部显示值。但我希望它显示在右侧。我是AngularJs的新手。

的index.html

<div class="row grid-divider" ng-controller='TopController'  >
        <div class="col-sm-2" >
          <uib-tabset active="activePill" vertical="true" type="pills"  >
            <uib-tab ng-repeat="mod in api.modules" heading="{{mod.name}}" >
              <div class="col-sm-5" style="font-size:2em; border-bottom:1px solid #ecf0f1;">
                {{mod.name}}</div>
            </uib-tab>
          </uib-tabset>
        </div>
      </div>

控制器

app.controller("TopController", function($scope){
    $scope.api = details;
});

var details = {
  root_url : "http://abc/",
  modules : [{
    name : "Content",
      methods : [{
            name : "Service List",
            method : "GET",
            headers : [{
                key : "Content-Type",
                value : "application/json"
              },{
                key : "access_token",
                value : "(String)"
              }
            ],request : "",
            response : {
              "status" : "(Boolean)",
              "code" : "(Integer)"
            }
          }
            ]
        },{
      name : "Payments",
      methods : [{
          name : "Wallets",
          method : "GET",
          headers : [{
              key : "Content-Type",
              value : "application/json"
            },{
              key : "token",
              value : "(String)"
            }
          ],
          request : "",
          response : {
            "status" : "(Boolean)",
            "code" : "(Integer)"
          }
        }
      ]
    }
    ]
};

工作Plunker

但我想在绿色区域显示选定的值。like this