Bootstrap 3 + AngularJS - Modal example
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div ng-controller="MainCtrl" class="container">
<pre>{{ tags | json }}</pre>
<div ng-repeat="(i, h) in html">
<div class="well">ROW {{ i + 1 }}</div>
<div class="row">
<div ng-repeat="(i, t) in h.data">
<h1 ng-if="t.tag.name == 'h1'">{{ t.tag.text }}</h1>
<div class="form-group {{ t.tag.colValue }}" ng-if="t.tag.name !== 'h1'">
<div ng-if="t.tag.name == 'text'">
<label for="$index">{{ t.tag.name }}</label>
<input type="text" id="$index" class="form-control" disabled/>
</div>
</div>
</div>
</div>
</div>
JavaScript
var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function ($scope) {
$scope.html = [{
"name": "teste",
"data": [{
"tag": {
"name": "h1",
"text": "Titulo 1",
"colValue": ""
}
},
{
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}, {
"tag": {
"name": "h1",
"text": "Titulo 2",
"colValue": ""
}
},
{
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
},
{
"tag": {
"name": "text",
"colValue": "col-xs-8"
}
}
]
}, {
"name": "teste",
"data": [{
"tag": {
"name": "h1",
"text": "Titulo 3",
"colValue": ""
}
},
{
"tag": {
"name": "text",
"colValue": "col-xs-4"
}
}
]
}];
});