Reloading Nested Angular directives from database - angularjs

Question

I have a super specific issue with an app I'm building.
Angular Code:
$scope.step1 = function ()
{
console.log("step1");
var columnDirective = '<ee-col object-ref1="Column1Clicked" object-ref2="Column2Clicked"></ee-col>';
var container = document.getElementById("container");
var angElement = angular.element(container);
angElement.html("");
angElement.append($compile(columnDirective)($scope));
};
$scope.step2 = function ()
{
console.log("step2");
var imageDirective = '<ee-img object-ref1="ImageRef1" ></ee-img>';
var container = document.getElementById("col2");
var angElement = angular.element(container);
angElement.html("");
angElement.append($compile(imageDirective)($scope));
};
$scope.step3 = function (){
console.log("step3");
var myImg ='<img src="https://www.dropbox.com/s/4ztbvr93gb3kllo/testcard.jpg?dl=1"/>'
var container = document.getElementById("ImagePlaceholder");
var angElement = angular.element(container);
angElement.html(myImg);
};
$scope.step4 = function (){
console.log("step4");
var container = document.getElementById("container");
var angElementContainer = angular.element(container);
var copied = document.getElementById("copied");
var angElementCopied = angular.element(copied);
angElementCopied.html(angElementContainer.html());
};
Basically I have an editor where I can drag/drop directives into a container and some of these directives themselves are containers
I have created a fiddle to illustrate this issue (does not use drag/drop)
https://jsfiddle.net/starkx/jehLd5og/
Step1: I add my column directive to a container div. My column directive has two cells and you can see the click events for each of these cells being raised in the console as you click around them
Step2: simulates dragging an image directive (this has an imageContainer) into the right hand cell. now when you click in this cell you get the click event from the image directive, whereas the left hand cell still shows the column click event
Step3:simulates dragging an image into the imageContainer. the click events all still function
In my application I am now at a position where I would save this information and a subsequent reload of this page would pull this data from the database.
I am simulating this in Step4 by copying the contents of the container div to the copied div.
In this copied code the ng-clicks do not work and you get no console output. I have tried compiling this 'copied' code but I have not been able to get the original stuff in steps (1-3) to work at the same time as the code in the 'copied' div.
Such is the nature of this issue that my google-fu has let me down somewhat and I'm suffering from being a relative beginner at angular coding.
(note: the fiddle is not designed so that you can click the steps willy-nilly. they must be done in order and once only. This is also a very simplified example as it is also possible to nest column directives within each other)
any help gratefully received
Edit: I have added a 5th step to $compile the copied code, but whilst the ng-click methods get called, their parameter is passed as 'undefined' in the copied section.