javascript array.filter()'s function is not working

Question

when i'm trying to search on the md-contact-chips i'm having an error showing that createFilterFor is not a function. But i did create it as a function as show below. may i know is there any way to resolve this problem ?

basically i'm trying to clone this demo but instead of writing the contacts name manually i called existing data from my database to replace the contacts name by using http call which is show below Account.getTastes() however, after i got the data display in the md-contact-chip like the pictures below, the querySearch is not working anymore.

html

<md-contact-chips required ng-model="tags" md-require-match md-contacts="querySearch($query)" md-contact-name="name" md-contact-image="image"  filter-selected="true" placeholder="Thai, chinese, cheap, cafe and etc">
 </md-contact-chips> 

Controller.js

$scope.querySearch = querySearch;
$scope.filterSelected = true;
$scope.allContacts = loadContacts();
 $scope.allContacts.then(function(contacts){
   $scope.tags = [contacts[0],contacts[1]]
 })

    /**
     * Search for contacts.
     */
     function querySearch (query) {
       var results = query ?
           $scope.allContacts.filter(createFilterFor(query)) : [];
       return results;
     }
    /**
     * Create filter function for a query string
     */
    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(contact) {
        return (contact._lowername.indexOf(lowercaseQuery) != -1);;
      };
    }

    function loadContacts() {
      var contacts;
      return Account.getTastes()
             .then(function(res) {
             contacts = res.data[0].tastes;
             return contacts.map(function (c, index) {
               var colors = ["1abc9c", "16a085", "f1c40f", "f39c12", "2ecc71", "27ae60", "e67e22","d35400","3498db","2980b9","e74c3c","c0392b","9b59b6","8e44ad","34495e","2c3e50"];
               var color = colors[Math.floor(Math.random() * colors.length)];
               var cParts = c.split(' ');
               var contact = {
                 name: c,
                 image: "http://dummyimage.com/50x50/"+color+"/f7f7f7.png&text="+c.charAt(0)
               };
               contact._lowername = contact.name.toLowerCase();
               return contact;
             });
             })
             .catch(function(error) {
               console.log("Error:"+error)
             });
    }

Answer 1

I have solved this problem

the reason i'm keep getting this error is because my $scope.allContacts is a promise instead of a array so the .filter will return the error saying createFilterFor is not a function.

   $scope.allTastes.then(function(tastes){
   $scope.tags = [tastes[0],tastes[1]]
   $scope.allTags = tastes; // create a new $scope to get all tags from the promise
 })

    /**
     * Search for contacts.
     */
     function querySearch (query) {
       console.log($scope.allTastes) // return a promise 
       $scope.allTastes= $scope.allTags; // pass it to $scope.allTastes, now it has all the array 
       var results = query ?
          $scope.allTastes.filter(createFilterFor(query)) : [];
       return results;

     }

thanks for all the help !