javascript - Angular Directive with Reset functionality -

i have directive called filterbutton, let user select filter option , add check mark on right. have reset button in filter.html. once user click reset button, filter field set default. had tried couple methods, didn't work. suggestion? thank in advance.

app.js

app.directive('filterbutton', function () { return {         restrict: 'ea',         templateurl: 'template/filter-button.html',         replace: true,         scope: {                 list: '=', //two-way binding                 selected: '=', //two-way binding                 field: '@', //one-way binding         },         link: function ($scope) {             $scope.selected = [];             $scope.setselectedoption = function() {                 var id = this.option.id;                  if(_.contains($scope.selected, id)) {                     $scope.selected = _.without($scope.selected, id)                 } else {                     $scope.selected.push(id);                 }                 return false;             };             $scope.ischecked = function(id) {                 if(_.contains($scope.selected, id)) {                     return "fa fa-check pull-right-selected";                 }                 return "";             };         }     } }); 

filter-button.html

<div class="row filter-item"> <div class="btn-group" dropdown is-open="{open: open}">     <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">fiter {{field}} <span class="caret"></span></button>     <ul class="dropdown-menu" aria-labelledby="dropdownmenu">         <li data-ng-repeat="option in list" class="dropdown-btn"> <a data-ng-click="setselectedoption()">{{option.name}}<span data-ng-class="ischecked(option.id)"></span></a></li>     </ul> </div> 

filter.html

<filter-button list="statuslist" selected="selectedstatus" field="status" popover="error customer? or no error customer?" popover-trigger="mouseenter"></filter-button> <filter-button list="systemlist" selected="selectedsystemtype" field="system type" popover="n+1 or stand alone?" popover-trigger="mouseenter"></filter-button> <filter-button list="customerfilterlist" selected="selectedcustomer" field="customer" popover="male or female?" popover-trigger="mouseenter"></filter-button> <div class="row filter-item">     <div class="filter-label">         <button class="btn btn-primary">reset</button>     </div> </div> 

you can reinitialize selected arrays on reset click button:

<button class="btn btn-primary" ng-click="reset()">reset</button> 

in controller:

$scope.reset = function() {     $scope.selectedstatus = [];     $scope.selectedsystemtype = [];     $scope.selectedcustomer = []; }