Image append is not working for directive in an ng-repeat

Question

This is the div has the ng-repeat. I am trying to append an image to it for each file.

<div class = "fileslink" ng-repeat="file in files" id = "filegen" my-repeat-directive>

.... ` This creates the image, and is called on page load:

function filesInFolder(i){
                $scope.files = [];
                $http.get("/restricted/getFileList?folder=" + i + "&withComments=True")
                .then(function (response) {
                    if (response.data.status != 'Failed' && response.data != []){
                        for (var j=0; j<response.data.length; j++){
                            var newFile = {};
                            newFile.fileName = response.data[j].fileName;
                            newFile.folder = i;
                            //alert("folder: " + newFile.folder);
                            newFile.comment = response.data[j].comment;
                            newFile.selected = false;
                            newFile.editingComment = false;
                            newFile.date = getDate(newFile.fileName, newFile.folder);
                            $scope.files.push(newFile);
                            var imageElem = document.createElement("img");
                            imageElem.src = "/Additional%20Files/icons/" + fileType(response.data[j].fileName) + ".png";

                            console.log(response.data[j].fileName);
                            imageElem.height = "37";
                            imageElem.width = "31";
                            imageElem.style.position = "absolute";
                            imageElem.style.top = "7px";
                            imageElem.style.left = "18px";
                            imageElem.style.paddingBottom = "2px";
                            imageElem.style.border = "2px solid black";
                            console.log("name inside folder: " + response.data[j].fileName + ", src: " +imageElem.src);

                        }
                    }
                }); 
            };

Directive

app.directive('myRepeatDirective', function() {
    var boxes = document.getElementsByClassName("fileslink");
    //console.log(boxes.length);
    return function(scope, element, attrs) {
        for (var x = 0; x < boxes.length; x++) {
            console.log("x: " + x + ", val: ");
            boxes[x].appendChild(imageElement);
        };
        angular.element(element).css('border', '2px solid red');
        if (scope.$last) {
            window.alert("im the last!");
        }
    };
});  

Right now the image only shows on the very first file, (index 0), and not the others. What am I missing here?

Still new to angular btw so if you have any more efficient ways to write the code, that would help.

Answer 1

You should wait till ng-repeat render all of its element. And then you should append an image element. You already had a condition which check ng-repeat completes its rendering, if(scope.$last) is a condition which indicates all element of ng-repeat has been rendered.

Directive

app.directive('myRepeatDirective', function() {
    return function(scope, element, attrs) {
        angular.element(element).css('border', '2px solid red');
        if (scope.$last) {
            var boxes = document.getElementsByClassName("fileslink");
            window.alert("im the last!");
            console.log(boxes.length); //all element must be rendered
            for (var x = 0; x < boxes.length; x++) {
                console.log("x: " + x + ", val: ");
                boxes[x].appendChild(imageElement);
            };
        }
    };
});