Clear form using angularjs - angularjs

Question

Problem: I am unable to clear the fields of the form completely.
Let me be more specific. When I go to the console, it appears that the previous entries are still present even though the reset button has been selected.
I have done the following in the form. I have a submit button and a reset button.
<div class="panel panel-default">
<div class="panel-body">
<form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate role="form">
<div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>
<div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>
<!---<div class="form-group">
<select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty">
<option disabled="disabled" selected="selected" value="">Specialty</option>--->
<!---<option disabled="disabledvalue=""></option>---><!---<option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option>
</select>--->
<div class="form-group">
<select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty">
<option selected="selected" value="">Specialty</option>
<!---<option value=""></option>--->
<cfoutput query="SpFind">
<option value=#ProviderSpecialty#>#ProviderSpecialty#</option>
</cfoutput>
</select>
</div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option selected="selected" value="">City</option>
<!---<option value=""></option>--->
<cfoutput query="cityFind">
<option value=#city#>#city#</option>
<!---<option ng-selected="{{searchParam.City==#city#?true:false}} value=#city#>#city#</option>--->
</cfoutput>
</select>
<!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities" value="{{c.City}}">{{c.City}}</option> </select>--->
</div>
<div class="row">
<!---<div class="col-xs-6 no-right-padding paddingLanguage">
<div class="form-group widthLanguage">
<select id="language" name="language" class="form-control" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<!---<option value=""></option>--->
<cfoutput query="Languages">
<option value=#Language#>#Language#</option>
</cfoutput>
</select>
<!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option ng-repeat="l in Languages">{{l.Lang}}</option>
</select>--->
</div>
</div>--->
<div class="col-xs-6 no-left-padding">
<div class="form-group"><select class="form-control" id="gender" name="gender" ng-model="searchParam.Gender">
<option selected="selected" value="">Gender</option>
<!---<option value=""></option>--->
<option>Male</option><option>Female</option> </select></div>
</div>
</div>
<hr class="hrDoctor" />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance">
<!---<option selected="selected" value="" disabled="disabled">Miles</option>--->
<option selected="disabled" value=""></option>
<option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>
<!---<option selected="disabled" value=""></option>
<option selected="selected" value="5">5</option>
<option selected="selected" value="10">10</option>
<option selected="selected" value="15">15</option>
<option selected="selected" value="20">20</option>--->
</select>
<div class="input-group-addon">mi</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group">
<input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-warning btn-block" onclick="return checkTextField(); overlayDisplayButton();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
<div style="margin-top:10pt"><button type="reset" class="btn btn-info btn-block" ng-click="reset()">Reset</button></div>
</div>
</form>
</div>
Here is the following script to reset the form:
$scope.reset = function(form) {
form.$setPristine();
form.$setUntouched();
};
What am I missing to reset the form completely?

Answer 1

This should be your reset function:
$scope.reset = function() {
$scope.searchParam = {};
$scope.providerSearch.$setPristine();
$scope.providerSearch.$setUntouched();
};
where providerSearch is a form name.