Revalidate form after post response

The setup is as follows.

  1. All fields are filled out and form is valid.
  2. Submit is executed, BUT there are a server side check on the provided data, and it returns "error, duplicate found".
  3. A hidden (ng-hide is used here) input field is now shown and this field is set to required.
  4. Now the problem occurs. The submit button is still enabled, even though the form is invalid!

Question is, how can I revalidate/update the validation state for the form after the serial number field is shown? I have tried with the following without any luck;

if (status == 413) {
    $scope.hide_serial_number = false;
    if ($scope.hide_serial_number == false) {
       document.getElementById("serial_no").required = true;
       $scope.myForm.serial_no.$invalid();
    };
};

status code 413 = duplicate was found in DB.

My submit button;

<div class="form-actions">
    <button type="submit" ng-disabled="myForm.$invalid" class="btn btn-primary btn-block btn-success btn-lg">Submit</button>
</div>

Please no jQuery answers, I'm doing all plain javascript – Thanks in advance!

Finally it's working!

Okay, so on the error promise I was given as explained in the question, I did the following;

if (status == 413) {
     $scope.myForm.$invalid = true;
     document.getElementById("serial_no").required = true;
     $scope.hide_serial_number = false;
};

This makes the submit button disabled and waits for the serial number to be entered before enabling.