jquery clone() breaks form validation

I have a field in a form generated through a directive:

It starts out as ng-pristine, ng-valid, ng-valid-required. (It is populated via serverside request).

There is a remove button, which, to ensure compatability with rails form handling, simply removes it and adds it cloned and invisible just before the submit button.

The onclick logic is as follows:

 scope.removeDecisionRule = (index, e) ->
     parent = angular.element(e.target).parent()
     unless parent.hasClass('brand-new')
       parent = parent.clone()
#      parent.css("display", "none")
       parent.find('input[name$="[_destroy]"]').val("1")
       parent.appendTo('form').eq(0)
       scope.decisionRules.splice(index, 1)

The splice removes it from the array which populates the initial form, thus handing control over to a directive which then removes the element from the page, while the ['_destroy'] field is a rails requirement.

The element appears on the page (that's why the display=none is commented out).

However on form submit it appears to get flagged by angulars validation (the input box outline goes red). It is still set to ng-pristine, ng-valid, ng-valid-required.

Entering the input box and editing its value (remove a character, then readd), removes the block. So a hack is to add the following before scope.decisionRules.splice:

 parent.find("input").each (index, element)->
      angular.element(element).val(angular.element(element).val())

Now my question is: Why does this occur, and how can I avoid it without the objectively horrendous hack above?

Thanks!