Clone part of html code with jquery that contains Angular - angular part not functioning in cloned part

[devel...@roads.dk]

This is a form in razor / mvc5 project

Summery: I'm trying to make multiple "sub-forms" that can be added to the form and they all have an file upload script with them.

Problem is, as far I can notice that the cloned part of angular DOM is not initializing/compiling. Just a heads up - I'm still new to angularjs so I tried a lot of reading a googling before I posted.

OrderForm.cshtml Part that im cloning is a form table .form-group and .multiple-form-group :

<div class="row">

    <div class="col-xs-12" >

        <div class="form-group multiple-form-group" data-max=99>

            <div class="form-group input-group">
<!-- part of code here I'm trying to clone -->

                <table class="inputtable" >

                    <tr>

                        <td id="tableId0" width="0%">

                           ... 

                        </td>

                        <td width="14%">

                            ...

                        </td>

                        ......

                    </tr>

                    <tr class="dropdown-menu" id="uploadTableMain" name="0" style="width:100%;">

                        <td id="uploadPlaceHolder" width="100%" ng-include="'/Content/Order/_Upload.html'"></td> <!-- i tred to call this part again when it gets cloned, usually just the rendered part is cloned (_Upload.html) and the upload buttons are not working -->

                    </tr>

                </table>

                <span class="input-group-btn">

                    <button type="button" id="addNewSubOrderBtn" name="0" class="btn btn-default btn-add">+</button>

                </span>

<!-- up to here -->

            </div> 

        </div>

    </div>

</div>

_Upload.html 

<div class="container" ng-controller="FileUploadCtrl">

    <div class="container row">

        <div class="col-xs-2 fileupload-buttonbar">

            <div class="col-lg-push-2 btn-group-vertical">

                <span class="btn btn-success fileinput-button">

                    <i class="glyphicon glyphicon-plus"></i>

                    <input type="file" name="file" data-url="FileContents/Upload"

                           multiple upload><span>Add files...</span>

                </span>

                <span type="submit" class="btn btn-primary" ng-click="upload()">

                    <i class="glyphicon glyphicon-upload"></i>

                    Upload

                </span>

                <span class="btn btn-warning" ng-click="remove()">

                    <i class="glyphicon glyphicon-remove"></i>Remove All

                </span>

            </div>

        </div>

        <!-- The table listing the files available for upload/download -->

        <div class="col-xs-10">

            <span ng-if="!files.length">No files selected</span>

            <table>

                <tr ng-repeat="file in files">

                    <td width="40%">{{file}}</td>

                    <td width="10%">{{file.size}}</td>

                    <td width="50%">

                        <div class="progress" ng-show="percentage">

                            <div class="bar" style="width: {{percentage}}%;"></div>

                        </div>

                    </td>

                </tr>

            </table>

        </div>

    </div>

</div>

appscript.js (part that is cloning when the ) 

 $(function () {

       

        var addFormGroup = function (event) {

            $("#uploadTableMain.dropdown-menu").each(function (i, obj) {

                $(obj).removeClass('open');

                $(obj).hide();

                

            });

            event.preventDefault();

            

            var $formGroup = angular.element($(this).closest('.form-group'));

            var $multipleFormGroup = angular.element($formGroup.closest('.multiple-form-group'));

            var $formGroupClone = angular.element($formGroup).clone();

            $(this)

                .toggleClass('btn-default btn-add btn-danger btn-remove')

                .html('&ndash;');

            $(this).attr("style", "display: inline-block;");

            $formGroupClone.find('input').val('');

            $formGroupClone.insertAfter($formGroup);

            //$formGroupClone.find('button#addNewSubOrderBtn.btn.btn-default.btn-add').attr("style", "display: inline-block;");

            var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');

            if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {

                $lastFormGroupLast.find('.btn-add').attr('disabled', true);

            }

            $formGroupClone.find('#id').val(NewGuid());

            $formGroupClone.find('div.btn-group.fullwidth:last').remove();

            $formGroupClone.find('.multiselect').multiselect({

                numberDisplayed: 1,

                enableFiltering: true,

                enableCaseInsensitiveFiltering: true,

                filterPlaceholder: 'Søg...',

                nonSelectedText: 'Vælg produkt',

                nSelectedText: 'valgt'

            });

            //var upl123 = $formGroupClone.find('#uploadPlaceHolder');

            //upl123.html();//("<ng-include src=\"'/Content/Order/_Upload.html'\">"));

            //var injector = angular.injector(['ng']);

            

            //"$compile", function ($compile) {

            //    var scope = angular.element(upl123).scope();

            //    $compile(upl123)(scope);

            //}

            //]);

            //upl123.html("<ng-include src=\"'/Content/Order/_Upload.html'\" ></ng-include>")

            

            

            $('.datetimepicker').datetimepicker({

                format: 'DD.MM.YYYY. HH:mm',

            });

            $('[id^="tableId"]').each(function (i, obj) {

                $(obj).attr("id", "tableId" + i);

            });

            $('[name^="uplBtnTo"]').each(function (i, obj) {

                $(obj).attr("id", i);

            });

            $('tr#uploadTableMain.dropdown-menu').each(function (i, obj) {

                $(obj).attr("name", i);

            });

            $('[id^="productType"]').each(function (i, obj) {

                $(obj).attr("name", "ProductType" + i);

            });

            $('[id^="addNewSubOrderBtn"]').each(function (i, obj) {

                $(obj).attr("name", i);

            });

            

                

            

        };

app.js (angularjs script) - that is actually a file upload script

(function () {

    'use strict';

    var app = angular.module('app', []);

    app.controller('FileUploadCtrl',

    ['$scope', '$rootScope', 'uploadManager',

    function ($scope, $rootScope, uploadManager) {

        $scope.files = [];

        $scope.percentage = 0;

        $scope.dotheshow = true;

        $scope.upload = function () {

            uploadManager.upload();

            $scope.files = [];

        };

        $scope.remove = function () {

            $scope.files = [];

        };

        $rootScope.$on('fileAdded', function (e, call) {

            $scope.files.push(call);

            $scope.$apply();

        });

        $rootScope.$on('uploadProgress', function (e, call) {

            $scope.percentage = call;

            $scope.$apply();

        });

    }]);

    app.factory('uploadManager', function ($rootScope) {

        var _files = [];

        return {

            add: function (file) {

                _files.push(file);

                $rootScope.$broadcast('fileAdded', file.files[0].name);

            },

            clear: function () {

                _files = [];

            },

            files: function () {

                var fileNames = [];

                $.each(_files, function (index, file) {

                    fileNames.push(file.files[0].name);

                });

                return fileNames;

            },

            upload: function () {

                $.each(_files, function (index, file) {

                    file.submit();

                });

                this.clear();

            },

            setProgress: function (percentage) {

                $rootScope.$broadcast('uploadProgress', percentage);

            }

        };

    });

    app.directive('upload', ['uploadManager', function factory(uploadManager) {

        return {

            restrict: 'A',

            link: function (scope, element, attrs) {

                $(element).fileupload({

                    dataType: 'text',

                    add: function (e, data) {

                        uploadManager.add(data);

                    },

                    progressall: function (e, data) {

                        var progress = parseInt(data.loaded / data.total * 100, 10);

                        uploadManager.setProgress(progress);

                    },

                    done: function (e, data) {

                        uploadManager.setProgress(0);

                    }

                });

            }

            

        };

    }]);

 

[basil farraj]

you should $compile your html. you can do this by injecting the $compile to a controller, or if you want to do it straight after your jquery manipulation, use this: 

$(".yor class").each(function () {
    var content = $(this);
    angular.element(document).injector().invoke(function ($compile) {
        var scope = angular.element(content).scope();
        $compile(content)(scope);
    });
 });