having trouble with binding data back to the file - angularjs

Question

I'm new to angularJS and trying to update a row of data in the view but somehow it appears not to do anything. the goal is to render the new row of data into my table.
thanks a lot!
myBankApp.controller("displayClients",function($scope,$http){
$http.get('/data/clients.json').then(function(response){
$scope.list= response.data;
});
$scope.addClient=function(){
$scope.list.push({
name: $scope.client.name,
lastName: $scope.client.lastName,
bankAccountNumber: $scope.client.bankAccountNumber,
balance:$scope.client.balance
})
$scope.client.name="";
$scope.client.lastName="";
$scope.client.bankAccountNumber="";
$scope.client.balance="";
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="displayClients">
<table>
<tr>
<th>first name</th>
<th>last name</th>
<th>account number</th>
<th>balance</th>
</tr>
<tr ng-repeat= " x in list">
<td> {{x.name}}</td>
<td> {{x.lastName}}</td>
<td> {{x.bankAccountNumber}}</td>
<td> {{x.balance}}</td>
</tr>
</table>
</div>
<br>
<form ng-submit="addClient() ng-controller="displayClients"">
<input type="text" placeholder="name" ng-model="client.name"/>
<input type="text" placeholder="lastName" ng-model="client.lastName"/>
<input type="text" placeholder="account" ng-model="client.bankAccountNumber"/>
<input type="text" placeholder="balance" ng-model="client.balance"/>
<input type="submit" value="add client">
</form>