I am working on an Angular JS project and i have a function to reset the filters in a page. What i am trying to do is pretty basic. setting all the filters to empty and calls searchStudents() which will list the full students list. this.nameSearch is a text field and this.genderField and this.skillsFilter is a select dropdown which i am binding with ng-model.

 function resetAllFilters() {
    this.nameSearch = "";
    this.genderFilter = "";
    this.skillsFilter = "";
    searchStudents();
  }

 function searchStudents() {
        if (!!this.genderFilter) {
            this.gender = self.genderFilter;
        }
        if (!!this.skillsFilter) {
            this.skills = this.skillsFilter;
        }
        params = {
            search: this.nameSearch
            skills: this.skills,
            gender: this.gender
            startsWith: "",
            startRow: startRow,
            pageSize: this.studentsPerRequest
        };
        this.loading = true;
        StudentService.students.get(params).$promise.then(
            function(response) {
                console.log(response);
            });
    }

function resetAllFilters() is invoked on a rest button click. when i select either of the gender of skills from dropdown the list is filtered. but when i click on reset the values in the dropdown gets reset but it doesn't reflect the values in searchStudents(). the list gets updated with the same previous filtered value instead of the whole list. any inputs will be appreciated . thanks in advance