Просмотр файла, который выбран по типу входного файла с несколькими, используя Angularjs

Я пытаюсь просмотреть изображения, выбранные из файла типа ввода с несколькими. Для этого я хочу список путей к файлам и используя эти пути, я предварительно просмотрю изображения.

Но здесь я использовал ng-src в теге img, и эти пути установлены на ng-src а также я хочу создать img тег в соответствии с выбором файла с помощью ng-repeat.

Предположим, что я выберу 5 файлов на input type=file затем создадим 5 img тег. Предположим, я меняю файлы с 5 на 2, затем все 5 тегов img удаляются и создаются 2 img тега.

Я не знаю, подходит ли ng-repeat для создания тега img соответствии с выбором файла или нет?

ниже это моя директива myfileupload

App.directive('myFileUpload', function (fileService) {
return {link: function (scope, element, attrs) {

    element.bind('change', function () {

        var index;

        var index_file = 0;
        for (index = 0; index < element[0].files.length; index++) {
            var file=element[0].files[index];

            fileService.setFile(element[0].files[index], index_file, attrs.myFileUpload);
            index_file++;
            var src={};

            /*src["src"]=element[0].files[index];*/
            fileService.setFilePath(element[0].files[index], index_file, attrs.myFileUpload);

            console.log(pathss);
            path.push(src);



        }
        index_file = 0;

    });

}
};
});

это служба mys

App.service('fileService', function () {


var fileService = {};

fileService.getFile = function (name) {
    return file[name];
};

fileService.setFile = function (newFile, index, name) {
    if (index === 0 && file[name] === undefined)
        /*file[name] = [];*/
        console.log(file);
    file[name][index] = newFile;

    /*console.log(name);*/
};

fileService.getFilePath = function (name) {
    return filepath[name];
};

fileService.setFilePath = function (newFile, index, name) {
    if (index === 0 && file[name] === undefined)
        /*file[name] = [];*/
        console.log(file);
    filepath[name][index] = newFile.val;

    /*console.log(name);*/
};

return fileService;
})

контроллер для того, как я создаю файл типа ввода

$scope.add=function(){

    var name="descimg["+currentg1+"]";
    var pathname="imgfile["+currentg1+"]";
    file[name] = [];



    var $div = angular.element("<div><label id='desccodeL["+currentg1+"]' for='desccodeL["+currentg1+"]''>Code "+currentg1+"</label><textarea rows='3' cols='6' id='desccode["+currentg1+"]' name='desccode["+currentg1+"]' ng-model='blog.desccode["+currentg1+"]''></textarea></div><div><label id='descimgL["+currentg1+"]' for='descimgL["+currentg1+"]'>Image "+currentg1+"</label><input type='file' id='descimg["+currentg1+"]' class='file' name='descimg["+currentg1+"]' my-file-upload='descimg["+currentg1+"]'  multiple/></div>");
    var e=document.getElementById("outerdiv");

    var $div2=angular.element("<div ng repeat='path in "+fileService.getFilePath("descimg["+currentg1+"]"); +"'><img ng-src=''/></div></div >);
    var e2=document.getElementById("displayblog");

    angular.element(e).append($div).injector().invoke(function($compile) {
        var scope = angular.element($div).scope();
        $compile($div)(scope);      
    });

    angular.element(e2).append($div2).injector().invoke(function($compile) {
        var scope = angular.element($div2).scope();
        $compile($div2)(scope);     
    });

    currentg1++;
};

элемент файла создается динамически после вызова функции add, а также, когда я устанавливаю myservice.setFilePath, выдает ошибку в newFile.val !!!