Trigger filter only on click - angularjs

Question

I have a list of data, this data is filtered by a dropdown menu.
The problem is, i want the filtering to be triggered only on a button click, not on the dropdown change.
<select ng-model="annee" ng-options="annee.titre for annee in annees track by annee.id">
</select>
<input type="submit" name="submit" value="Filtrer">
<ul>
<li ng-repeat="x in accueils | filter:annee" >
{{x.titre}}
<div ng-bind-html="x.description | to_trusted"></div>
{{x.date}}
{{x.cout}} $
{{x.participants}} participants
</li>
</ul>
Here is a working example :
http://plnkr.co/edit/MbfrhdKfbTObybsQvxrR?p=preview
I want the filter to be triggered on clicking on the "filter" button
Is it possible ?
Thanks a lot!

Answer 1

Note that your filter code here doesn't match your Plunker; it's filter:{annee:annee.id} in the Plunker.
You want to decouple the ng-repeat from the ng-model. One way to do this is to filter based on a new property and update that property only when the Filter button is clicked.
In your HTML:
Add a <form> element and set ng-submit to call submit() when the Filter button is pressed:
<form ng-app="myApp" ng-controller="customersCtrl" ng-submit="submit()">
Change the ng-repeat filter to use a new property instead of the property used by the <select> element's ng-model:
<li ng-repeat="x in accueils | filter:{annee:currentAnnee.id}">
In your controller:
Create the new property initialized with an invalid id:
$scope.currentAnnee = {
"id": 0
};
Create a submit() function that sets the new property from the <select> element's ng-model:
$scope.submit = function() {
$scope.currentAnnee = $scope.annee;
};
See this Plunker for a complete example.

Answer 2

As pointed by #msmolens, there were some differences in your plunker and the code you posted here. Secondly, the two arrays that you have used, have nothing in common so for demonstration purposes i have changed the structure of the second array that will be used as filter.
To start with, decouple your Array filter from the model value of the select drop down.
<select ng-model="annee" ng-options="annee.date for annee in annees track by annee.id">
</select>
<input type="submit" name="submit" value="Filtrer" ng-click="filter()">
<ul>
<li ng-repeat="x in accueils | filter:filterExpr" >
{{x.titre}}
<div ng-bind-html="x.description | to_trusted"></div>
{{x.date}}
{{x.cout}} $
{{x.participants}} participants
</li>
</ul>
As visible in the code, we have a model variable for the filter expression in the ng-repeat.
We then initialize the filter expression with a blank value.
$scope.filterExpr = {"date" : ''};
There after, you just need to capture ng-click of the filter button and modify the variable being used as a filter.
$scope.filter = function() {
$scope.filterExpr = {"date" : $scope.annee.date};
};
You can find the updated plunker here.