I am iterating over an array of objects that represent HTML elements. I am trying to pass an object reference (or a copy) to my custom directive inside this loop. For each object in the array, I want to create a custom directive and send the object used in that iteration of the loop to the directive. I cannot seem to make this work without the variable being on the controller scope or polluting the global scope with a bunch of alias variables. This is my controller function.

function decode() {

    var html = '';

    for(var element of $scope.currentPage.elements) {
                
        html += `<pv-${element.type} id="${element.id}" element="element"></pv-${element.type}>`;
    }
            
    var j = $(html);  // Compile will not work unless the same var is used in statements below!
    $('#viewer').html(j);
    $compile(j)($scope);
}

I need to pass each object using the element attribute. I can get this to work by creating a reference to the current object on the scope and passing that but of course the data changes upon the next iteration of the loop. I tried sending it as a JSON string and parsing inside of the directive, but that broke too because of the unexpected quotes.