Javascript 如何使角度绑定在动态创建的dom项上工作？

我正在尝试制作网页的构造器。这是你的电话号码。我有标题、段落、列表等等。我从菜单中拖动它们，它们被克隆并粘贴到dom中。 和这个差不多。 这就是克隆它们的方式：

app.directive('ironplayDraggableBox', ['$compile', function($compile) {
  return {
    link: function(scope, element, attrs) {
      $(element).draggable({
        connectToSortable: ".column",
        helper: function(){
          $new_el = $(this).clone().draggable({disabled: true});
          return $compile($new_el)(scope);
        },

        handle: ".drag",
        drag: function(e, t) {
            t.helper.width(400)
        },
        stop: function(e, t) {
          t.helper.attr('style', '');
        }
     });

    }
  };
}]);

我希望创建的每个元素都有一些用于选项的按钮：文本对齐、颜色等。这些按钮更改驻留在

.view

div中的元素的类。我通过指令和jQuery来执行此操作。下面是元素的html代码：

<div class="box" ironplay-draggable-box>
        <a href="#close" class="remove label label-danger">
            <i class="glyphicon glyphicon-remove"></i> remove
        </a>
        <span class="drag label label-default">
            <i class="glyphicon glyphicon-move"></i> drag
        </span>

        <span class="configuration">
            <select name="align" ironplay-text-align>
                <option value="">Align</option>
                <option value="text-left">Left</option>
                <option value="text-right">Right</option>
                <option value="text-center">Center</option>
            </select>

            <select name="emphasis" ironplay-emphasis>
                <option value="">Emphasis</option>
                <option value="text-muted">Muted</option>
                <option value="text-primary">Primary</option>
                <option value="text-success">Success</option>
                <option value="text-info">Info</option>
                <option value="text-warning">Warning</option>
                <option value="text-danger">Danger</option>
            </select>
        </span>

        <div class="xpreview">Title</div>
        <div class="view">
            <h3 contenteditable="true">h3. Lorem ipsum dolor sit amet.</h3>
        </div>
    </div>

拖曳
排列
左边
赖特
居中
重点
减轻的
主要的，重要的
成功
信息
警告
危险
标题
h3。Lorem ipsum dolor sit amet。

我如何通过这样的绑定实现：

 <select name="align" ng-model="text-align">

并自动更新为类名：

<h3 contenteditable="true" class="{{text-align}}">h3. Lorem ipsum dolor sit amet.</h3>

h3。Lorem ipsum dolor sit amet。

告诉我一个最短工作代码的小提琴或琴键，我就可以编辑代码生成结果tok，thnx。只是一个minute@Mwayi在这里，plunker Align仍然不起作用（奇怪！？），但想法很清楚，我稍后会这样做，但工作流应该类似于1）draggabble指令应该只包含一个配置对象，2）droppable指令应该使用配置创建一个具有新范围的“模具”。3） 加载了ng模板（基于[2]中的配置）的该模具指令应创建一个新范围，在该范围内，您将通过标准控制器视图绑定（即范围$watch（'align'）管理ng模型的更改