Changing the text of single Button within ng-repeat in angularjs - angularjs

Question

am new to angularjs.
I want to change the text of single button within ng-repeat after successful POST request.
html code
<div class="row req-content-container" ng-show="selectedTopic">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 create-immediate-meeting-list-container" align="center" ng-repeat="item in allKOL">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<img class="profile-image-small" ng-src="{{imagesrc}}{{item.photo}}">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" valign="middle">
<div class="row"><b><span class="pull-left">{{item.firstName}} {{item.lastName}}</span></b><br></div>
<div class="row"><b>Speciality</b><br>{{item.speciality}} </div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row"> </div>
<div class="row"><b>Location</b><br>{{item.city}}</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="row"> </div>
<div class="row"><b>Convenient Hours</b><br>{{item.fromAvailable}} to {{item.toAvailable}}</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button type="button" class="btn margin-top-10 request-button-style" ng-click="sendRequest(item.id)">{{sendRequestButtonStatus}}</button>
</div>
</div>
</div>
From controller, am setting the button text to "Send Request" initially and i want it to show "awaiting Request" after successful POST request, but doing this all the buttons text are changing to "awaiting Request". I tried to sort it out but couldn't, can i get any help..
Controller
RequestAMeetingService.immediateMeetWithDoctor(payload, function (result) {
if(result.success) {
$localStorage.immediateMeetingID = result.data.data.meeting;
console.log($localStorage.immediateMeetingID);
console.log(result.data.data);
$scope.closeThisDialog();
$scope.sendRequestButtonStatus = "Awaiting Request";
AlertService.addSuccess(result.data.data.message);
}
else
{
AlertService.addError(result.data.data.err);
}
})

Answer 1

In that case , you have to define a buttons array , with the initial text as Send Request.
var buttonArray = ["Send Request"]; // array should match your ng-repeat length
Modify your ng-click method of your button such that it sends $index as the second argument.Then in your success modify the text according to index.
$scope.buttonArray[index] = "Awaiting Request";
This should be your html
<div class="row req-content-container" ng-show="selectedTopic">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 create-immediate-meeting-list-container" align="center" ng-repeat="item in allKOL">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<img class="profile-image-small" ng-src="{{imagesrc}}{{item.photo}}">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" valign="middle">
<div class="row"><b><span class="pull-left">{{item.firstName}} {{item.lastName}}</span></b><br></div>
<div class="row"><b>Speciality</b><br>{{item.speciality}} </div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row"> </div>
<div class="row"><b>Location</b><br>{{item.city}}</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="row"> </div>
<div class="row"><b>Convenient Hours</b><br>{{item.fromAvailable}} to {{item.toAvailable}}</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button type="button" class="btn margin-top-10 request-button-style" ng-click="sendRequest(item.id, $index)">{{ buttonArray[$index] }}</button>
</div>
</div>