Как отобразить выбранное значение вне uib-tab
У меня есть вкладки Bootstrap Ui, то есть загрузка значений из объекта массива в контроллер. Именно это я и пытаюсь сделать. когда пользователь нажимает на вкладку, Я хочу отобразить значение на DIV (вне UIB-tab), и оно должно быть получено от контроллера.
В настоящее время он работает в стороне uib-tab и отображает значение внизу (изображение 1).но я хочу, чтобы он отображался справа (изображение 2).Я новичок в 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> Controller 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)" } } ] } ] }; This is Working <a href="http://plnkr.co/edit/6aTqtJD1bjPB18do1Ovr?p=preview"></a>[<a href="http://plnkr.co/edit/6aTqtJD1bjPB18do1Ovr?p=preview" target="_blank">^</a>]Plunker but i want to display selected values on green color area.<a href="http://plnkr.co/edit/jZkJ6XY3cVTolOIK2v6t?p=preview"></a>[<a href="http://plnkr.co/edit/jZkJ6XY3cVTolOIK2v6t?p=preview" target="_blank">^</a>]like this