Angular ngRepeat + JS filter method resulting in odd rendering delay

UPDATE: Found what is likely the same or nearly the same issue: AngularJS: ng-repeat list is not updated when a model element is spliced from the model array

What ended up working for me is changing the filter function down below with the following:

$scope.deleteRole = function (roleID) {
    var pickIndex = findWithAttr($scope.dtbRole, "ROLEID", roleID); //to find array index       
    $scope.dtbRole.splice(pickIndex, 1);
    $scope.$apply();
  }

I thought I had a decent understanding of when not to use $apply(), but I guess this is one place to use it. Are there any disadvantages to this?

Original Text:

I apologize if there is a direct answer to this, but searching with several dozen combinations of terms has resulted in a lot of nothing for me, partly due, I'm sure, to ngRepeat's filter and JS's filter method sharing a name. I have found answers to literally hundreds of questions on here without ever posting, but I've come up empty-handed on this one.

I'm new to Angular as of late last year, but I've learned a lot over the last few months (largely thanks to this site!). I have an ngRepeat working near-perfectly (I'll get to that "near-" in a moment):

<tr ng-repeat="role in dtbRole | orderBy:'-PERCENT'">  
  <td>
    <input ng-model="role.PERCENT" class="form-control" type="text" />
  </td>
  <td>
    <input ng-model="role.DESCRIPTION" class="form-control" type="text" />
  </td>
  <td>
    <button type="button" class="btn btn-danger" ng-click="deleteRole(role.ROLEID)">
      &times;
    </button>
  </td>
</tr>

The script that runs within that delete button is pretty straightforward:

$scope.deleteRole = function (roleID) {        
  $scope.dtbRole = $scope.dtbRole.filter(function (obj) {
    return obj.ROLEID !== roleID;
  });
}

I've thrown in some console.log() lines throughout to make sure it's doing what it should, and it is. The weird part, and the reason I say it's working near-perfectly, is that in the webpage itself, the visual isn't updated until I click in and out of the inputs within the item that should be deleted, and sometimes I have to do that a few times before it happens. I can't figure out what exactly triggers the update, but simply doing nothing will not update it (tried going on a 15-minute break, to no avail). The JS console insists that dtbRole is updated immediately. No performance spikes, no traffic delays, no freezing or choppiness... I'm stumped. I even did a few simple remakes on jsfiddle to see if I could replicate the issue, and I can't. It's instantaneous everywhere else, and I can't spot what's different.

What's more, I have another area after the ngRepeat to add items to dtbRole, and it updates instantaneously in the visual:

$scope.addRole = function (perc, desc) {
  $scope.dtbRole.push({ "ROLEID": idGen(), "PERCENT": perc, "DESCRIPTION": desc });
  $scope.addRolePercent = ''; //clear input
  $scope.addRoleDesc = ''; //clear input
}

It all seems simple enough, but after a few days of this, I'm going to admit that I need a few more pairs of eyes to see what I'm doing wrong.

So I ask if there's some glaring mistake that is obvious to a more veteran Angular or JS developer, or if there's a different technique I could use to achieve the same effect.