form_builder.component.js

function FormBuilderController() {
  var ctrl = this;

  ctrl.gotSelected = function(selectedItem) {
    console.log(selectedItem);
  };

  ctrl.addItem = function(item) {
    console.log(item);
  };

  ctrl.duplicateField = function(scope) {
    console.log(scope);
  };

  ctrl.removeField = function(scope) {
    console.log(scope);
  };
}

angular.module('slApp').component('slFormBuilder', {
  restrict: 'EA',
  templateUrl: 'components/form_builder/form_builder.html',
  controller: FormBuilderController,
  bindings: {
    gotSelected: '<',
    onDelete: '&',
    onUpdate: '&'
  }
});

original.html

<form role="form" id="previewForm" class="form-horizontal draglist" name="fieldForm" sl-form>
  <div ng-repeat="field in vm.form.fields" ng-drop="true" ng-drop-success="builder.onDropComplete($index, $data, $event)">
    <div ng-drag="builder.reordering" ng-drag-data="field" ng-drag-success="builder.onDragComplete($data, $event)" ng-center-anchor="true">
      <span ng-show="builder.reordering" >
        <i class="glyphicon glyphicon-move"></i>
      </span>
      <div form-field="field" ng-cancel-drag></div>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Register</button>
    </div>
  </div>
</form>

view.html

<div class="panel-body">
  <div ng-init="item = {}" ></div>
  <sl-form-builder></sl-form-builder>
  <div sl-form-builder></div>
</div>