我连续有两个小部件，每个小部件有6个列。我编写了动态填充一个小部件的代码，我希望在家庭仪表板中添加该小部件。我需要它在页面加载的时候加载特定div的内容。我已经在单独的文件中写了div，以便在多个地方使用。所以我想知道如何在我的HTML中加载该div。我在这里提到了我的'main.html'下面的代码，它包含两个6列，我想用包含angular div的other.html文件填充前6列。
<!-- WIDGETS SPACE, PLACE SOME UIKITS HERE OR MAKE YOUR OWN KITS ;) -->
<div class="row">
<div class="col-md-6">
<!-- UPCOMMING NEW TESTS -->
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-actions-input">
<a href="#" class="btn btn-default btn-sm">View all Test</a>
</div>
<h3 class="panel-title">Upcoming Test New Tests</h3>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces1.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<a href="#" rel="tooltip" title="approve" class="btn btn-default"><i class="fa fa-check fa-fw"></i></a>
<a href="#" rel="tooltip" title="invoice" class="btn btn-default"><i class="fa fa-credit-card fa-fw"></i></a>
<a href="#" rel="tooltip" title="delete" class="btn btn-default"><i class="fa fa-times fa-fw"></i></a>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">Purchase 4 items ($80)</a></h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Rose Davies</small>
<small><i class="fa fa-user fa-fw"></i> 16 minutes</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces2.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<a href="#" rel="tooltip" title="approve" class="btn btn-default"><i class="fa fa-check fa-fw"></i></a>
<a href="#" rel="tooltip" title="invoice" class="btn btn-default"><i class="fa fa-credit-card fa-fw"></i></a>
<a href="#" rel="tooltip" title="delete" class="btn btn-default"><i class="fa fa-times fa-fw"></i></a>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">Purchase an item - Wrapkit Admin Template</a></h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Dilara Elmas</small>
<small><i class="fa fa-user fa-fw"></i> 20 minutes</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces3.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<a href="#" rel="tooltip" title="approve" class="btn btn-default"><i class="fa fa-check fa-fw"></i></a>
<a href="#" rel="tooltip" title="invoice" class="btn btn-default"><i class="fa fa-credit-card fa-fw"></i></a>
<a href="#" rel="tooltip" title="delete" class="btn btn-default"><i class="fa fa-times fa-fw"></i></a>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">Payment for invoice #141213</a></h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> George Florianu</small>
<small><i class="fa fa-user fa-fw"></i> 42 minutes</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces4.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<a href="#" rel="tooltip" title="approve" class="btn btn-default"><i class="fa fa-check fa-fw"></i></a>
<a href="#" rel="tooltip" title="invoice" class="btn btn-default"><i class="fa fa-credit-card fa-fw"></i></a>
<a href="#" rel="tooltip" title="delete" class="btn btn-default"><i class="fa fa-times fa-fw"></i></a>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">Purchase an item - Wrapkit Admin Template</a></h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Gustavo Francisco</small>
<small><i class="fa fa-user fa-fw"></i> 1 hours</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<hr>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces5.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<a href="#" rel="tooltip" title="approve" class="btn btn-default"><i class="fa fa-check fa-fw"></i></a>
<a href="#" rel="tooltip" title="invoice" class="btn btn-default"><i class="fa fa-credit-card fa-fw"></i></a>
<a href="#" rel="tooltip" title="delete" class="btn btn-default"><i class="fa fa-times fa-fw"></i></a>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">Purchase an item - Wrapkit Admin Template</a></h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i> Bastien Guichard</small>
<small><i class="fa fa-user fa-fw"></i> 1 hours</small>
</div>
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
<!-- END OF RECENTS ORDER KITS -->
</div>
<div class="col-md-6">
<!-- TOP RANK (users, items or others) KIT -->
<div class="panel panel-default">
<div class="panel-body">
<h3 class="panel-title">Weekly list of Toppers
<br>
<small class="text-muted">Updated at 07:16 am</small>
</h3>
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces11.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Emma Greene</h5>
<div class="progress progress-md">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 8.33%">
<div class="progress-text">0 Right Answers</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces12.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Júlia Márta</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 74.8%">
<div class="progress-text">1,122 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces13.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Tom Bonnet</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 69.27%">
<div class="progress-text">1,039 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces14.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Naia Gómez</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 64.8%">
<div class="progress-text">972 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<div class="media">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces15.jpg" alt="">
</a>
<div class="media-body">
<h5 class="media-heading">Gary Lewis</h5>
<div class="progress progress-md">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="1500" style="width: 58.73%">
<div class="progress-text">881 sales</div>
</div>
<!-- /.progress-bar -->
</div>
<!-- /.progress -->
</div>
<!-- /.media-body -->
</div>
<!-- /.media -->
<br>
<!--Just line-->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
<!-- /END TOP RANK KIT -->
</div>
<!-- /.cols -->
</div>
<!-- /.row -->
</div>
other.html包含以下代码。
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-actions-input">
<a href="#" class="btn btn-default btn-sm">View all Test</a>
</div>
<h3 class="panel-title">Upcoming Test</h3>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="media" ng-repeat="item in testList track by $index">
<a class="pull-left kit-avatar kit-avatar-36" href="#">
<img class="media-object" src="images/dummy/uifaces1.jpg" alt="">
</a>
<div class="media-body">
<div class="pull-right">
<div class="btn-group btn-group-xs">
<a href="#" rel="tooltip" title="Attend Test" class="btn btn-default"><i class="fa fa-check fa-fw"></i>Going To Attend Test</a>
</div>
<!-- /.btn-group -->
</div>
<!-- /.pull-right -->
<h5 class="media-heading"><a href="#">{{item.title}}</a></h5>
<div class="text-muted">
<small><i class="fa fa-user fa-fw"></i>{{item.questionPoster}}</small>
<small><i class="fa fa-user fa-fw"></i> {{item.timePosted}}</small>
</div>
</div>
<hr>
<!-- /.media-body -->
</div>
<!-- /.media -->
<!-- /.panel -->
<!-- END OF RECENTS ORDER KITS -->
{{variable}}
</div>
</div>