通过angularjs拖动动态更改模板

我在我的应用程序中有以下设置:http://plnkr.co/edit/I2RCjYU17SDX65thUUqD?p=preview

<div class="container-fluid">
<div class="row-fluid">
    <div class="col-xs-7">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    Panel 1
                </div>
            </div>
            <div class="panel-body" style="height: 250px;">
              Panel 1
            </div>
        </div>
    </div>
    <div class="col-xs-5">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    Panel 2
                </div>
            </div>
            <div class="panel-body" style="height: 250px;">
              Panel 2
            </div>
        </div>
    </div>
</div>

<div class="row-fluid">
    <div class="col-xs-7">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    Panel 3
                </div>
            </div>
            <div class="panel-body" style="height: 250px;">
              Panel 3
            </div>
        </div>
    </div>
    <div class="col-xs-5">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    Panel 4
                </div>
            </div>
            <div class="panel-body" style="height: 250px;">
              Panel 4
            </div>
        </div>
    </div>
</div>

我想做的是能够通过拖动面板重新排序。例如，我希望能够将面板1拖到右下角，并与面板4交换位置。我对angularjs比较陌生，我不知道如何解决这样的问题。

我最初的想法是为每个可能的面板组合创建一个不同的模板，并动态地包括我设置的变量的模板，但是这将需要有16个不同的模板，我觉得必须有一个更好的解决方案