JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false&amp;language=es"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="myApp">
    <div ng-controller="myController">
        <input type="text" ng-model="search"></input>
<div class="bs-example">
    <table class="table" >
      <thead>
        <tr>
          <th>#</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="direction in directions">
          <td>{{$index}}</td>
          <td>{{direction.description}}</td>
        </tr>
      </tbody>
    </table>
  </div>
        
    </div>
</div>

JavaScript

'use strict';
var app = angular.module('myApp', []);

app.factory('Autocomplete', function($q) {
    var get = function (search) {
        var deferred = $q.defer();
        var autocompleteService = new google.maps.places.AutocompleteService();
        autocompleteService.getPlacePredictions({ input: search, types: ['geocode'], componentRestrictions:{ country: 'ES'} },function (predictions, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
            console.log("ok");
                deferred.resolve(predictions);
            }else{
                deferred.reject(status);
            }
        });
        return deferred.promise;
    };

    return {
            get : get
        };
});


app.controller('myController', function ($scope, Autocomplete) {
    $scope.$watch('search', function(newValue, oldValue) {
        var promesa=Autocomplete.get(newValue);
        promesa.then(function(value) {
            $scope.directions=value;
          }, function(reason) {
            $scope.error=reason;
          });
    });

});