AngularMaterial md-chips : Dont show selected item in <md-autocomplete> - angularjs

Question

I'm trying the <md-autocomplete> example from here md-chips
To prevent the selected items from coming inside <md-autocomplete> I've modified the querySearch function like this:
function querySearch (query) {
var results = query ? self.searchData.filter(createFilterFor(query)) : [];
var finalResults = [];
angular.forEach(results, function(result) {
if($scope.selectedItems.indexOf(result.name) < 0) {
finalResults.push(result);
updateSelectedItems(result);
}
});
return finalResults;
}
But my problem is that the control does not come inside this function once we select an item. Can someone please explain how to solve this ?

Answer 1

I found the solution from this documentation: md-autocomplete
We just need to add md-no-cache="true" for calling the querySearchfunction each time we search for a query item

Answer 2

The solution that worked for me:
The md-no-cache="true" on md-autocomplete still is a must to force the autocomplete to reinitialize the md-items;
Md-chips should have md-on-remove and md-on-append set and implemented as to remove a chip from the list, or add a chip to the list;
My code looks something like this:
HTML:
md-on-remove="removeTagChip($chip)"
md-on-append="appendTagChip($chip)"
JS:
$scope.removeTagChip = function (chip) {
var chipPos = $scope.getPosition(chip.Id, $scope.ChipTags);
if (chipPos < 0) {
$scope.ChipTags.push(chip);
}
};
$scope.appendTagChip = function (chip) {
var chipPos = $scope.getPosition(chip.Id, $scope.ChipTags);
if (chipPos > -1) {
$scope.ChipTags.splice(chipPos, 1);
}
return chip;
};
$scope.getPosition just returns the position of the chip in the list of chips;