I have an issue with the code below where the floating label stops working when executing the php script via function "loadStaff". The floating label works prior to the execution of the php script. My limited knowledge suggests that the issue is caused by the option select value not being passed on to the angular model which in turn did not trigger the floating label since the option select retains the selected value ($('select#account_list').val('<?php echo $_POST['account_list'];?>') as I can see it showing up. However, the floating label is not executing even though I see the selected value in the option select field. How do we pass the selected value to the angular model for it to trigger the floating label? I could be wrong with my reasoning.

    <div ng-app="myApp">
      <form id="orderformstaff" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
        <div class="field" style="width: 100%">
          <label class="show-hide" ng-show="account">Account</label>
          <div class="input-group mb-4">
            <span class="input-group-addon gi gi-user-key"></span>
            <select id="account_list" class="form-control custom-select" name="account_list" ng-model="account" onchange="loadStaff()" autocomplete="on" required/>
              <?php
                $a_list = $DB_CON_A->query("SELECT `id`, `email` FROM `staffs` ORDER BY `id` ASC");
                $data_row = '<option value="" disabled>Choose an account</option>';
                if($a_list !== false) {
                  foreach($a_list as $row){
                    $data_row .=  '<option value="'.$row['email'].'">'.$row['email'].'</option>'."
";
                  }
                }
                unset($row);
                echo $data_row;
              ?>
            </select>
          </div>
        </div>
      </form>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
    <script> var myApp = angular.module('myApp', ['ngAnimate']);</script> 
    <script>
      function loadStaff() {
        var form = 
        document.getElementById('orderformstaff');
        form.submit();
      };
    </script>
    <script type="text/javascript"> <!--allows option select to retain value after executing loadStaff-->
      $(document).ready(function(){
        $('select#account_list').val('<?php echo $_POST['account_list'];?>');
      });
    </script>

Actualy you don't need using AngularJS because did all jobs with PHP.

However if you want to fix current code

REMOVE

$('select#account_list').val('<?php echo $_POST['account_list'];?>');

THEN set attribute on select element

<select id="account_list" class="form-control custom-select" ng-init="account = <?php echo $_POST['account_list'];?>" name="account_list" ng-model="account" onchange="loadStaff()" autocomplete="on" required/>

EDIT

1. If you want to use AngularJS you should bind data with angularjs not with PHP.

2. If there is no JQuery you cannot use $(document).ready etc...

If you want to start learn AngularJS, you can start from here http://www.journaldev.com/7750/angularjs-simple-forms-tutorial It use PHP on back-end.