克隆Angularjs中的div

Question

      <div id="clonedInput1" class="clonedInput">
          <div class="row">
              <div class="col-md-0"></div>
              <div class="col-md-2">
                  <div class="input-group">
                      <input type="text" ng-value="result" class="form-control" id="barcodeId1" placeholder="Barcode" ng-model="formData.barcode">
                      <span class="input-group-btn">
                            <button class="btn btn-secondary" type="button" ng-click="displayProductDetails(this.formData.barcode)">Go!</button>
                      </span>
                  </div>
              </div>
              <div class="col-md-2">
                  <md-input-container class="md-block" style="margin-bottom: 6px;">
                      <label style="font-size: 14px; font-weight: 400; line-height: .75;">Name </label>
                      <input type="text" name="input" ng-model="formData.name" ng-readonly="checked">
                  </md-input-container>
              </div>
              <div class="col-md-2">
                  <md-input-container class="md-block" style="margin-bottom: 6px;">
                      <label style="font-size: 14px; font-weight: 400; line-height: .75;">Mrp </label>
                      <input type="text" name="input" ng-model="formData.mrp" ng-readonly="checked">
                  </md-input-container>
              </div>
              <div class="col-md-6">
                  <div class="form-group" style="margin-top: 20px;">
                      <label class="checkbox-inline">
                        <input type="radio"  name="reduction" value="Amount" ng-model="formData.amount">
                        Reduction Amount
                      </label>
                      <label class="checkbox-inline" style="padding-left: 0px;">
                        <input type="text" name="reductiontext" value="" ng-model="formData.reductionAmount" style="width: 80px;">
                      </label>
                      <label class="checkbox-inline" style="padding-left: 0px;">
                       <input type="radio" name="reduction" value="percentage" ng-model="percentage">
                        Reduction Percentage
                      </label>
                      <label class="checkbox-inline" style="padding-left: 0px;">
                          <input type="text" name="reductiontext" value="" ng-model="formData.reductionPercentage" style="width: 80px;">
                      </label>
                  </div>
              </div>
          </div>
      </div>

和控制器代码

        scope.addMoreFields = function(event) {
            var div = document.getElementById('clonedInput1');
            scope.counter = scope.counter + 1;
            var clone = div.cloneNode(true, true);
            console.log(clone);
            clone.id = "clonedInput" + scope.counter;
            var parentElement = angular.element(
                document.querySelector('.test'));
            var compiledElement = compile(clone)(scope);
            compiledElement.find('input').val('');
            parentElement.append(clone);
            var input = document.getElementById('clonedInput' + scope.counter).getElementsByTagName('input');
            console.log(input[0]);
            input[0].id = "barcodeId" + scope.counter;
        }

单击addMore按钮，Control将转到addMoreFields。

我正在获取要克隆的div的id并更改其输入标记的id和id（以便每个div具有不同的id）并附加到父级。

问题是从文本框（条形码）克隆数据时也会克隆。

哪个不应该。

请帮我解决这个问题。