javascript - AngularJS: trigger event after nested ng-repeat with filter is complete -

i have big json in controller fetched mongodb database. here's structure (haven't added irrelevant keys):

$scope.keyword; //ignore explained below $scope.data = [     {"key" : [                  {"nested_key": //some value},                  {"nested_key": //some value} //so on              ]     },     {"key" : [                  {"nested_key": //some value},                  {"nested_key": //some value}              ]     },     {"key" : [                  {"nested_key": //some value},                  {"nested_key": //some value}              ]     } ] 

here's html template displaying json:

<div ng-repeat="outer in data">     <div ng-repeat="inner in outer.key | keywordfilter: keyword">         //print inner values     </div> </div> 

here, 'keyword' holds values used filter inner ng-repeat loop. here's filter:

app.filter('keywordfilter', function() {     return function(collection, keyword) {         //iteration on entire collection. if keyword exists add item output         return output;     } }) 

now, expected, filter runs whenever modify '$scope.keyword'. updated when click on button follows:

html:

<input type="text" ng-model="temp" /> <button ng-click="updatekeyword()"> 

controller:

$scope.updatekeyword = function() {     $scope.keyword = $scope.temp; } 

the problem:

due sheer size of data, filtering process taking around 10-15 seconds (sometimes browser hangs!) , new filtered data returned filter displayed on screen.

the requirement:

what want during these 10-15 seconds want show loader , after calculations done, news displayed. how achieve this?

what tried: figured once click on filter button, need wait ng-repeat loop finish , tried triggering event on finish of ng-repeat referring this thread.

but found out event triggered when data displayed first time , not when filter button clicked , data filtered keyword filter.

you maybe invalidate action when angular in digest:

in controller:

function isindigest(){  $scope.$$phase ? true : false; }   $scope.updatekeyword = function() {  if(isindigest()){ return; }  $scope.keyword = $scope.temp; } 

and in template

<button ng-class="{'inactive':  isindigest()}"  ng-click="updatekeyword()">