How to empty md-autocomplete text field after submit? - angularjs

Question

I used md-autocomplete inside html form, then I wanted to set its field to empty after submitting. I tried, as shown in the snippet, to use $setPristine() but it didn't work. I also tried to assign the model to null or empty string, but also it wasn't successful.
PS: Angularjs version I used is v1.3.15
angular.module("myApp", ["ngMaterial"])
.controller("main", function($scope){
$scope.searchString = "";
$scope.routeToSearchPage = function (searchString, form) {
$scope.form.$setPristine();
};
$scope.simulateQuery = false;
$scope.isDisabled = false;
$scope.states = loadAll();
$scope.querySearch = querySearch;
function querySearch (query) {
var results = query ? $scope.states.filter( createFilterFor(query) ) : $scope.states,
deferred;
if ($scope.simulateQuery) {
deferred = $q.defer();
$timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function loadAll() {
var allStates = "aaa, bbbb, cccc, bla";
return allStates.split(/, +/g).map( function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
}
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-aria.js"></script>
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="myApp">
<div ng-controller="main">
<form name="form"
ng-submit="submit(searchString);$event.preventDefault();">
<md-autocomplete
md-floating-label="search"
ng-disabled="isDisabled"
md-no-cache="noCache"
md-selected-item="selectedItem"
md-search-text="searchString"
md-items="item in querySearch(searchString)"
md-item-text="item.display"
ng-keyup="$event.keyCode == 13 ? routeToSearchPage(searchString) : null">
<md-item-template>
<span md-highlight-text="searchString" md-highlight-flags="^i">{{item.display}}</span>
</md-item-template>
</md-autocomplete>
</form>
<md-button ng-click="routeToSearchPage(searchString, form)">
<md-icon class="material-icons">search</md-icon>
</md-button>
</div>
</div>

Answer 1

Here's an example of clearing an md-autocomplete - CodePen
Your snippet isn't actually showing the md-autocomplete as it should appear.
JS
$scope.clear = function () {
$scope.searchString = null;
};
I have also removed the markup below for the CodePen to work correctly:
ng-keyup="$event.keyCode == 13 ? routeToSearchPage(searchString) : null">