Modal search filter doesn't clear the ng-repeat list, Previous results persists

Question

I have a modal like below, which shows a list of items and a text field which filters the items in the list 'tmc.userMacrosListFiltered' according to the value in 'tmc.macrofilterpattern'.

<div id="listmodal" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 350px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style=" height: 400px; width: 350px;overflow:scroll;">
                    <div id="macrolist" class="list-group" tabindex="0" >
                        <input type="text" id="filterby" class="form-control list-group-item" autocomplete="off" placeholder="type macro title here.." ng-model="tmc.macrofilterpattern" />
                        <a href="" class="list-group-item " ng-click="tmc.selectedMacro(item.macroTitle)" 
                        ng-repeat="item in tmc.userMacrosListFiltered" ng-if="item.macroTitle.toLowerCase().includes(tmc.macrofilterpattern.toLowerCase())">
                            {{item.macroTitle}}
                        </a>
                    </div>
            </div>
        </div>
    </div>
</div>

When I close the modal, and I would like to clear the list and filter text. I am clearing it as below,

$('#listmodal').on('hidden.bs.modal', function(){
    $('#macrolist').find('.active').removeClass('active');
    tmc.macrofilterpattern = "";
    tmc.userMacrosListFiltered = {};
});

On a given trigger to open the modal, I am filling up the tmc.userMacrosListFiltered list with latest values and suppose to be shown as list of items on the modal. The list is being updated with latest values however, the modal shows previous values for sometime (5-10 seconds) and refreshes with the latest values in 'tmc.userMacrosListFiltered'.

Answer 1

I apologize for this non answer, but I don't have the reputation to just comment. I think the issue is you're combining jquery with angular functionality. You should take a look at uibModal (https://angular-ui.github.io/bootstrap/) and try to get away form the jquery version within angular. I've had some issues in the past doing things out of the Angular digest like this.

Essentially you can create a modal component/controller that will live in the angular world and fit more seamlessly into your application. It also ensures that every time you open your model, your controller is reset with the parameters and should display correctly.

If that's not doable, you should take a look at $apply https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply to bring your jquery fired code into angular.