angular material md-autocomplete with google maps autocomplete

autocomplete.html

<md-autocomplete  flex 
        md-input-name="address autocomplete"
        md-floating-label="Address"
        md-no-cache="true"
        md-selected-item="$ctrl.selectedItem"
        md-search-text-change="$ctrl.search($ctrl.searchText)"
        md-search-text="$ctrl.searchText"
        md-items="item in $ctrl.search($ctrl.searchText)"
        md-item-text="item"
        md-min-length="1"
        placeholder="Type your address"
        md-select-on-match>
         <p class="md-caption"> {{$ctrl.cords.lat}}, {{$ctrl.cords.lng}}</p>
    <md-item-template>
    <span md-highlight-text="$ctrl.searchText" md-highlight-flags="^i">{{item}}</span>
    </md-item-template>
    <md-not-found>
    No matches found for "{{$ctrl.searchText}}".
    </md-not-found>
</md-autocomplete>

autocomplete.js

angular.module('myApp')
  .component('autocomplete', {
      templateUrl: '../scripts/components/autocomplete.html',
      controller: function ($scope) {


        // AutocompleteService make sure incude google maps javascript api 
        vm.gmapsService = new google.maps.places.AutocompleteService();



        /**
         * 
         * Used for 
         * @param {any} address
         * @returns
         */
        vm.search = function(address) {
            var deferred = $q.defer();
            getResults(address)


                  .then(function (predictions) {
                      var results = [];
                      if(!predictions){

                          return deferred.reject();
                      }
                      for (var i = 0, prediction; prediction = predictions[i]; i++) {
                          results.push(prediction.description);
                      }
                      deferred.resolve(results);
                  })

                  .catch(function(){
                      console.log('error');
                      deferred.reject();
                  });
            return deferred.promise;
        };   

        /**
         * 
         * used with google api to predict addresses 
         * @param {string} address
         * @returns 
         */
        function getResults(address) {
            var deferred = $q.defer();
            try{
                vm.gmapsService.getQueryPredictions({input: address}, function (data) {
                    deferred.resolve(data);
                });
            }
                  catch(e){
                      console.log(e, 'error');
                      deferred.reject();
                  }

            return deferred.promise;
        }