Unable to create dynamic rows along with tree dropdown in angular js

I am working on to add dynamic row with angular js and it's working fine but I need to add tree dropdown as well in the row but onclick of add row button its populate the same data in all rows.

Here is my code and rows snapshot

I am using angularjs but its not working, somewhere I heard that we can use callback to prevent previous click event but I don't know how to use.

please help me

<div class="tree-drop">
    <tree-dropdown class="tree-dropdown" call-fuc="test()"
        withparam="param(name)" testing="selectedNodeData(msg)"
        id="tree-dropdown" data="FarmLands" on-select="selectedLand()"
        ng-model="selectedFarmData[0]" selected="selectedFarmData[0]">
    </tree-dropdown>
</div>


module.directive('treeDropdown', [ '$compile','$parse' ,function($compile,$parse) {
    var template = "<div id='treedata' class='select' ng-click='openTree()' ng-model='selected.name'><p>{{selected.name}}</p></div>";
    template += "<div class='list' ng-show='isOpen'></div>";
    return {
        restrict : 'E',
        scope : {
            test : "&callFuc",
            data : '=',
            selected : '=',
            testing : "&",
            param : "&withparam",
            select: '&onSelect'
        },

        template : template,
        controller : function($scope, $element) {

            ctrl = $scope;
            ctrl.isOpen = false;

            ctrl.openTree = function() {
                ctrl.isOpen = ctrl.isOpen ? false : true;
            }

            ctrl.childClick = function(obj) {
                setSelected(ctrl, obj);
                ctrl.isOpen = false;
                ctrl.$apply();
            }
        },
        link : function(scope, element, attrs, ngModel,rootScope) {

            var onSelectCallback = $parse(attrs.onSelect);
            scope.senddata = function(obj) {
                scope.testing({msg:obj});
            };

            var list = angular.element(element[0].querySelector('.list'));

            scope.$watchGroup([ 'data', 'selected' ], function(newValues, oldValues, scope) {
                list.html('');

                if (!scope.selected) {
                    setSelected(scope, null);
                }
                var options = getOptions(scope, scope.data, 0);
                list.append($compile(options)(scope));
            });

            // Close on click outside the dropdown...
            angular.element(document).bind('click', function(event) {
                event.stopPropagation();
                event.preventDefault();
                    if (element !== event.target && !element[0].contains(event.target)) {
                        scope.$apply(function() {
                            scope.isOpen = false;
                        })
                    }   
                     scope.select();

            });
        }
    };

    function getOptions(scope, data, level) {
        var optionUL = angular.element("<ul></ul>");
        angular.forEach(data, function(obj) {
            var optionLI = angular.element("<li class=''></li>");
            var optionA = angular.element("<p class='level-" + level + "'> " + obj.name + "</p>");
            if (!angular.isUndefined(obj.children) && obj.children.length) {
                var optionC = angular.element("<i class='fa fa-plus level-" + level + "'></i>");
                optionLI.append(optionC).append(optionA);
            } else {
                var optionC = "";
                if (obj.type == "field") {
                    optionC = angular.element("<i class='fa fa-bookmark-o block-icon level-" + level + "'></i>");
                }
                if (obj.type == "field_block") {
                    optionC = angular.element("<i class='fa fa-envira zone-icon level-" + level + "'></i>");
                }
                if (obj.type == "node") {
                    optionC = angular.element("<i class='fa fa-arrow-circle-right farm-icon level-" + level + "'></i>");
                }
                optionLI.append(optionC).append(optionA);
            }

            // Set selected option if selected id or object exist..
            if (scope.selected == obj) {
                setSelected(scope, obj);
            }

            optionA.bind("click", function() {
                scope.childClick(obj);
            })

            if (obj.children) {
                optionLI.append(getOptions(scope, obj.children, level + 1));
            }
            optionUL.append(optionLI);
        })

        return optionUL;
    }

    function setSelected(scope, obj) {
        if (obj) {
            scope.selected = obj;
            scope.senddata({
                "obj" : obj
            });
        } else {
            scope.selected = null;
        }
    }
} ]);

Any help would appreciated.