Array Splice method not updating the scope variable and UI properly

[Rishabh Shukla]

Hi all,

I am trying to make a call to a function, which looks something like this:

scope.deleteCharge = function (outerIndex, innerIndex) {

  

  if (outerIndex >= 0 && innerIndex >= 0) {                   

          scope.charges.clients[outerIndex].splice(innerIndex, 1);

      } else {

         //some stuff here

      }  

  }

  

}

So, here scope.charges is kind of a two dimensional array and I am passing an innerIndex and outerIndex as arguments in the function. 

The HTML view looks something like this:

<li ng-repeat="client in addedClients" ng-init="outerIndex = $index">  
  <tr ng-repeat="charge in charges.clients[outerIndex]" ng-init="innerIndex = $index">
        <td>Some Stuff</td>                            

    <td><a ng-click="deleteCharge(outerIndex, innerIndex)"></a></td>

  </tr>
</li>

This is the simplified code but you can assume all other scope variables like "addedClients" are already there.

So, basically I am having nested  ng-repeats here and after clicking on the this "deleteCharge" button I am calling the "scope.deleteCharge(outerIndex, innerIndex)" function as shown above. 

Now, when I click on the button to call the function it doesn't properly change the UI and results in unstable state.

I have tried to call scope.$apply(), but it throws an error: "Error: [$rootScope:inprog] $apply already in progress". Probably because this is already within an executing function.

Any idea about how I can make that work?