In Angluar, I need to use the data returned asynchronously to set a state to make the page display the corresponding page. What should I do?

first I globally set an initial identifier: vm.Flag = false
and an empty array that can receive returned data: vm.checkTypeData = [];
then modify the status of Flag in the asynchronous operation returned by angluar:
restAPI.localecheck.queryList.save ({}, {

)

          awId: vm.awid
        })
        .$promise.then(function (resp) {
          angular.forEach(resp.rows, function (v, k) {
            if (v.checkFlag === "true" || v.checkFlag === true) {
              v.checkFlag = true;
            } else if (v.checkFlag === "false" || v.checkFlag === false) {
              v.checkFlag = false;
            }
          });
          vm.checkTypeData = resp.rows;//
          if(vm.checkTypeData[0].checkEName){//Flag
              vm.Flag = true //
          }
        });

the following is the specific display of my page:

    <span ng-if="!Flag">{{item.checkName}}</span>
    <span ng-if="Flag">{{item.checkEName}}</span>

at this time, I found that no matter how the judgment condition is changed, it seems that the operation of modifying Flag in asynchronism does not work. It always shows:

    <span ng-if="!Flag">{{item.checkName}}</span>

what should be done to make the page display the corresponding text based on the data returned asynchronously