javascript - AngularJS: how to change button text onclick rendered using ng-repeat -

i have following html + angularjs code:

    <table class="table table-hover">       <thead>         <tr>           <th width="80%">task</th>           <th width="10%">delete</th>         </tr>       </thead>       <tbody>         <tr ng-repeat="task in task_list track $index">           <td>{{task.title}}</td>           <td>             <button ng-click="delete_task($index)" class="btn btn-success btn-xs">completed</button>           </td>         </tr>       </tbody>     </table> 

this generate list of task in following image:

view image

when click on "complete" button sending http request server, , part working fine. trying achieve is, when click on button button text should change 'please wait'.

how can achieve using angularjs without using jquery.

you can this. following code change status of button while submitting submitting. once complete change completed , disable button.

html

<tr ng-repeat="task in task_list track $index">   <td>{{task.title}}</td>   <td>     <button ng-disabled="task.disabled" ng-click="delete_task($index)" class="btn btn-success btn-xs">{{task.status ? task.status : 'complete'}}</button>   </td> </tr> 

javascript

  $scope.delete_task = function(index) {     var task = $scope.task_list[index];      task.status = 'submitting';      $http.get('post.json').then(function(res) {       task.status = 'completed';       task.disabled = true;     });   }; 

here working plunkr