angular app delete input form UNWILLING from wordpress after reloading/submitting

Question

I have a form:

<table class="widefat" ng-app="myApp" ng-controller="MyCtrl">
    <tr>
        <td><label for="name_pokemon"><?php _e( "Name", "cpt" ); ?></label></td>
        <td><input id="name_pokemon_val" maxlength="{{a1Max}}" name="name_pokemon" type="text" ng-model="a1" ng-change="update()" value="<?php echo esc_textarea( get_post_meta($post->ID, 'name_pokemon', true) ); ?>" placeholder="<?php esc_attr_e( 'Name', 'cpt' ); ?>"></td>
        <td>Length: {{a1.length}} Remaining: {{remainingA}}</td>
    </tr></table>

My script:

<script>
            var myApp = angular.module('myApp',[]);

            function MyCtrl($scope) {
                    $scope.a1='';
                   
                var maxA = 21;
          
                $scope.update = function()  {
                    $scope.remainingA = maxA - ($scope.a1.length);

                    $scope.a1Max = maxA;
                    
                }
                $scope.update();}</script>

        

Now I have the problem that after I submit my Custom Post Type it reset the input data.

How can I fix that?

Thanks for helping

Answer 1

Found a similar problem here

The angular App just show the values of the app... I fixed it with initalize the var of the app with the value from wordpress

now it looks like that:

$scope.a1='<?php echo esc_textarea( get_post_meta($post->ID, 'name_pokemon', true) ); ?>'; 
                    $scope.a2='<?php echo esc_textarea( get_post_meta($post->ID, 'code_card_pokemon', true) ); ?>';
                    $scope.b1='<?php echo esc_textarea( get_post_meta($post->ID, 'lang_pokemon', true) ); ?>';
                    $scope.b2='<?php echo esc_textarea( get_post_meta($post->ID, 'code_pokemon', true) ); ?>';
                    $scope.c1='<?php echo esc_textarea( get_post_meta($post->ID, 'setname_pokemon', true) ); ?>';

After initalize the scope it worked perfectly.

I hope I could help someone