javascript - Select values, then only call function -

i use jsfillde used previously.

as can see when clicking on filter (soup, meat, etc.), filtered result load in real time. instead let user make selection , then trigger result cliking a"update" button (to enhcance performances on mobile)

i quite unsure how acheive in javascript, new..i using ionic, , below html piece call filter function.

 <ion-item ng-repeat="dish in dishlist | selecteddishtype:selection ">         <article class="item_frame">                 <h1 class="item_name_english">{{dish.nameenglish}}</h1>                  <h2 class="item_name_local_language">{{dish.namelocal}}</h2>              <p class="item_description ">{{dish.description}}</p>         </article>         <!--main article frame 1 -->     </ion-item> 

add button :

    <div class="listing_venue_types_filter_page">         <div class="input_dishtype_selection " data-ng-repeat="dishtype in dishtypelist" ng-class="{'filter_selected':selection.indexof($index) != -1}" ng-click="toggle($index)">{{dishtype.name}}</div>     </div>     <button class="button" ng-click="updatedisplay()">update</button> 

and in controller : move emit action new scope function

  $scope.updatedisplay = function () {      //calling event listener latest selection data.         $rootscope.$emit('dishtype.selectionchanged', $scope.dishtypelist.filter(function (dtype, idx) {             return $scope.selection.indexof(idx) != -1;         }).map(function (dtype) {             return dtype.name.tolowercase();         }));         //calling event listener latest selection data.     };