How to recompile a div in angular after add dynamic content

i am just adding some dynamic content in a tbody.something like below…

        <tbody id="fileUploadPanel" ng-init="newCtrl.filecount = 1">
        <tr class="fileUploadTemplate">
            <td align="center">
                <img id="image" alt="Img" class="img-responsive pointer" src="../../../Images/new-thumb.svg" height="200" width="200">
            </td>
            <td class="cellClass">
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div class="form-control" data-trigger="fileinput">
                        <i class="glyphicon glyphicon-file fileinput-exists"></i>
                        <span class="fileinput-filename"></span>
                    </div>
                    <span class="input-group-addon btn btn-default btn-file">
                        <span class="fileinput-new">Select file</span>
                        <span class="fileinput-exists">Change</span>
                        <input class="ChooseAPicForOffer" accept="image/*" id="file" type="file" name="file" onchange="angular.element(this).scope().newCtrl.fileNameChanged(this)" />
                    </span>
                    <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                </div>
            </td>
        </tr>
    </tbody>

vm.fileUploadTemplate = '<tr>' + $('.fileUploadTemplate').html() + '</tr>';

    vm.fileNameChanged = function () {
    for (var i = 1; i <= vm.filecount; i++) {
        var fileUpload = $("#file" + i).get(0);
        var file = fileUpload.files;
        if (file && file[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                alert(e.target.result);
                $('#image' + i).attr('src', e.target.result);
                showimage = true;
            };
            reader.readAsDataURL(file[0]);
            angular.element(document.getElementById('fileUploadPanel')).append(vm.fileUploadTemplate);

            //vm.filecount++;
            //var $newfilediv =  $('#fileUploadPanel').append(vm.fileUploadTemplate);
            //angular.element(document).injector().invoke(function ($compile) {
            //    $scope.$apply(function () {
            //        var scope = angular.element($newfilediv).scope();
            //        $compile($newfilediv)(scope);
            //    })
            //})
            //angular.element(document.getElementById('fileUploadPanel')).append($compile(vm.fileUploadTemplate)($scope));

            return false;
        } else {
            $('#image' + i).attr('src', '......Imagesnew-thumb.svg');
        }
    }

here i am using angular ui route and controller as syntax.inside my fileNameChanged() method the commented code i so far try to solve my problem.
referenced from ….
example1 and example2

i also try something…

<input class="ChooseAPicForOffer" accept="image/*" id="file" type="file" name="file" onchange="angular.element(this).scope().newCtrl.filecount++; angular.element(this).scope().newCtrl.fileNameChanged(this)" />

althouth all of above is not working …

not working means when i try to inspect my code then i found that the expression of angular is as it is means
<img id="image" alt="Img" class="img-responsive pointer" src="../../../Images/offer-thumb.svg" height="200" width="200">

the expression is not evaluated…

i dont know what i am doing wrong..please help me….

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/20/how-to-recompile-a-div-in-angular-after-add-dynamic-content/
via @lzomedia #developer #freelance #web #lzomedia.com