Using Flask_wtf inside angularJS ng-app

Question

I have a form created with Flask_wtf. Now I trying to add in angularJS to do the username/password min-length validation etc on the form.

1. I tried: Flask-WTF to create the form and handle submit button press

   _form = LoginForm()  # Flask-WTF: Construct a LoginForm
   if _form.validate_on_submit():  # POST request with valid data?
   # Retrieve POST parameters
   _username = _form.username.data
   _passwd   = _form.passwd.data
   

2. I tried: Form.html

   {% import 'macros.html' as macros %}
   
   {% extends "base.html" %}{# in app_main's templates folder #}
   {% block title %}Login{% endblock %}
   {% block content %}
   {{ super() }}{# Render the contents of the parent block #}
   <h1>Login</h1>
   
   <!-- loginpage -->
   <form method="POST">
     {{ form.hidden_tag() }}{# Render any hidden fields, including the CSRF #}
   
     <div class="field">{{ form.username.label }} {{ form.username }}</div>
     {{ macros.show_field_errors(form.username.errors) }}
   
     <div class="field">{{ form.passwd.label }} {{ form.passwd }}</div>
     {{ macros.show_field_errors(form.passwd.errors) }}
   
     <div class="field">{{ form.submit }}</div>
   </form>   
   
   <div ng-app="mainApp" ng-controller="loginController">
    ........
   </div><!--end of ng-app-->
   {% endblock %}
   

   Issue: Putting my loginpage outside the ng-app < div > and submit button works well. But when I put it inside ng-app < div > the submit button will no longer work. Am I missing something?

3. I already changed Angular $interpolateProvider

   var app = angular.module('mainApp', []).config(function($interpolateProvider) {
   $interpolateProvider.startSymbol('{$');
   $interpolateProvider.endSymbol('$}');
   

4. I already checked other questions ,it does not resolve my issue by changing interpolate.

Thanks for your time!