Angularjs : How to display data after update on my UI - angularjs

Question

I have angular project My Requirement is : How to display data after update on my UI without refreshing, Data store in server i want it to display on Contact and Recent Tab immediately after Updating.
UI Bindings:
<li class="media contact-card">
<div class="media-left">
<a ui-sref=".viewClient({'clientId':client._id})">
<img class="media-object img-circle" src="https://placehold.it/42x42" alt="https://placehold.it/64x64">
<!--<div class="circle" ng-class="getRandomColorClass('Xipesh Gandhi')"><p>{{generateInitialChar('Dipesh Gandhi')}}</p></div>-->
</a>
</div>
<div class="media-body">
<div class="pull-left">
<h4 class="media-heading pull-left">{{client.firstName}} {{client.lastName}}</h4>
</div>
<div class="pull-right">
<a class="" ui-sref=".editClient({'clientId':client._id})"> <i class="glyphicon glyphicon-pencil" ></i></a>
<a class=""> <i class="glyphicon glyphicon-trash" ></i></a>
</div>
<div class="clearfix"></div>
<span>{{client.address}}</span>
<span>{{client.birthDate | date:'mediumDate'}}</span>
</div>
</li>
View :
<div class="tab-wrapper">
<tabset justified="true">
<tab heading="CONTACTS">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="add-client-link" ui-sref=".client"> <i class="glyphicon glyphicon-plus" ></i> Add Contact </a>
</div>
<div class="clearfix"></div>
</div>
<div class="hr"></div>
<div class="scrollable-container">
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
</div>
</tab>
<tab heading="RECENT">
<div class="tab-content">
<div>
<div class="pull-right">
<a class="add-client-link" ui-sref=".client"> <i class="glyphicon glyphicon-plus" ></i> Create Meeting </a>
</div>
<div class="clearfix"></div>
</div>
<div class="hr"></div>
<div class="scrollable-container">
<ul class="media-list">
<contact-card data-client="client" ng-repeat="client in clientList"></contact-card>
</ul>
</div>
</div>
</tab>
</tabset>
</div>
Controller:
$scope.updateClientList = function(client, operation){
if(operations.ADD === operation){
//$scope.clientList.push({firstname: $scope.client.firstName, lastname: $scope.client.lastName});
//$scope.clientList.push(client);
$scope.clientList.push (client);
// $scope.clientList = [];
} else if(operations.EDIT === operation){
} else if(operations.DELETE === operation){
}
$state.go('meeting-home.viewClient', {'clientId':client._id});
};
Does anyone know how to do it?

Answer 1

Please comment $scope.clientList = []; in your code. it will work. Any how you are not mentioning UI binding details.