javascript - AngularJS : 各アイテムのクリック時に同じ構造を追加する

Question

私のindex.htmlページは次のようなものです：

<div id="sidepanel" ng-controller="myCtrl">
<ul class="drop-down">
    <li ng-repeat="item in items">
        <a href="#">{{item.name}}</a>
    </li>
</ul>
</div>
<div id="mainpanel" ng-controller="listCtrl">
    <div ng-view></div>
</div>

この ng-view には、次のようなすべてのレコードを表示するための record-list.html があります。

<div class="container">
    <ul class="design">
        <li id="{{record.name}}" ng-repeat="record in records">
            <div>......</div>
        </li>
    </ul>
</div>

ここで、サイド パネルの各項目をクリックして、同じ構造を (各レコードのように) 追加したいと考えています。

その論理は何ですか？

私の最近のUIはこのように見えます。既存の構造を追加する必要があるクリックごとに同じ構造を追加したいと思います。

助けてください。ありがとう。