I am facing some issues while trying to make something like this-

I am having a table of employees with their phone numbers I have created a button that will redirect me to another portal using the phone number of the employees.

The issue that I am facing here is - for the initial button click the phone number is getting an empty string, which is fine I have initialized it as an empty string but I am updating the $scope variable value but that is not working. I tried putting $apply() and $watch(). But that is also throwing error -

Error: [$rootScope:inprog]

How can I resolve this? My code -

  <a id="hiddenRedirectButton" href="https://my-site/employee-logs.php?auth_token=<?=echo $token;?>&phoneNumber={{number}}" target="_blank">
                
<table>
  <tr ng-repeat="employee in data">
   <td class="text-center"><button class="btn btn-primary" ng- 
    click="redirect(employee.cellPhone)">Redirect</button>
   </td>
  </tr>
</table>
//Angularjs code -
$scope.number=""; 
$scope.redirect=(number)=>{
   console.log("redirecting to other portal");
   $scope.number=number;
   $scope.$apply(); // Error: [$rootScope:inprog]
   document.getElementById("hiddenRedirectButton").click();
}

For First time button click I am not getting the phone number in the url bar, second time I am getting the number. I am doing this just because I have to open the link on new tab I can't able to find any way to do this using window.location.href.