Angular and not angular forms within the same page - angularjs

Question

I have two forms on a single page. One form I am adding/deleting which is working fine. Now in the second form (which I don't want to do anything through angular)
But I am not able to submit this(second form). Both the forms are inside my app. Anybody have any idea please share.
I can see when I refresh the page "ng-pristine ng-valid" classes are added in my second form.
This is my first form
<div class="address address-form" ng-hide="!isEdit">
<form class="edit-address-form" ng-submit="updateAddress(currentAddress.aid);">
<div class="form-group">
<label class="sr-only" for="first_name">First name </label>
<input type="text" class="form-control" id="first_name" value="testing" name="first_name" value="{{currentAddress.first_name}}" placeholder="First name" required ng-model="currentAddress.first_name">
</div>
<div class="form-group">
<label class="sr-only" for="last_name">Last name</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last name" ng-model="currentAddress.last_name" >
</div>
<div class="form-group">
<label class="sr-only" for="phone">Phone/mobile</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone" ng-model="currentAddress.phone">
</div>
<div class="form-group">
<label class="sr-only" for="street">Street address</label>
<input type="text" class="form-control" id="street" name="street" placeholder="Street address" ng-model="currentAddress.street">
</div>
<div class="form-group">
<label class="sr-only" for="city">City</label>
<input type="text" class="form-control" id="city" name="city" placeholder="City" ng-model="currentAddress.city" >
</div>
<div class="form-group">
<label class="sr-only" for="postal_code">Postal code</label>
<input type="text" class="form-control" id="postal_code" name="postal_code" placeholder="Postal code" ng-model="currentAddress.postal_code" >
</div>
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<input type="text" class="form-control" id="country" name="country" placeholder="Country" autofocus ng-model="currentAddress.country">
</div>
<div class="form-group">
<div class="alert alert-danger" role="alert" ng-show="errorMsg">{{errorMsg}}</div>
<div class="alert alert-success" role="alert" ng-show="successMsg">{{successMsg}}</div>
<button type="submit" class="btn btn-lg btn-primary btn-block" id="button-update-address" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Updating address...">Update address</button>
</div>
</form>
</div>
This one second form
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Payment Summary</h3>
</div>
<div class=" ">
<form id="confirm-order" name="confirm_order" method="POST" action="">
<div class="form-group">
<?php
if($con->returned_rows):
$row = $con->fetch_assoc();
?>
<table class="table">
<tr>
<td> Sub total </td>
<td><?php print $row['subtotal'] ;?><input type="hidden" name="subtotal" value="<?php print $row['subtotal'] ;?>"/></td>
</tr>
<tr>
<td>Total items </td>
<td><?php print $row['total_qty'] ;?></td>
</tr>
<tr>
<td>Shipping</td>
<td><?php //print $row['total_qty'] ;?></td>
</tr>
</table>
<?php endif; ?>
</div>
<div class="form-group">
<input type="submit" name="confirm" class="btn btn-lg btn-primary btn-block" value="Confirm order"/>
</div>
</form>
</div>

Answer 1

angular has directive named form, because of which it considers your form directive in angular-scope.
if you want this directive to be out of angular-scope, use ngNonBindable
<form ng-non-bindable>
.....
</form>