Clone with ng-click

by Gaelle

HTML

<div ng-app="app" ng-controller="test">
  <h4>
      Main Div
    </h4>
  <div id="mainDiv">
    <p>
      This is main div
    </p>
  </div>

  <button ng-click="clickToClone('mainDiv', 'cloneDiv')">
    Click to Clone
  </button>

  <div id="cloneDiv">
    <h4>
      Clone Div
    </h4>
  </div>
</div>

CSS

#cloneDiv {
  color: blue;
}

#cloneDiv h4 {
  color: black;
}

JavaScript

var app = angular.module('app', []);

app.controller('test', function($scope) {
  $scope.clickToClone = function(sourceId, cloneId) {
    var sourceHtml = angular.element(document.getElementById(sourceId)).html();
    var dupId = angular.element(document.getElementById(cloneId));
    dupId.append(sourceHtml);
  }
});