first fiddle test
by modar al nashar
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="MainCtrl">
<uib-tabset active="active">
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" >
<div ng-bind-html="parseContent(tab.content)">
</div>
</uib-tab>
</uib-tabset>
</div>
CSS
.input-dropdown {
position: relative;
display: inline-block;
}
.input-dropdown .dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
margin-top: 2px;
background: #EEE;
}
.input-dropdown .dropdown div {
cursor: pointer;
padding: 2px 5px;
}
.selected {
color: red
}
.input-dropdown input:focus + .dropdown {
display: block;
}
JavaScript
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope,$sce) {
$scope.tabs = [
{ title:'title 1', content:'<div id="id1">111</div>' },
{ title:'title 2', content:'<div id="id2">222</div>' }
];
$scope.parseContent = function(content) {
return $sce.trustAsHtml(content);
}
});