title: AngularJS autocomplete from web service
body: <p>I'm using REST Countries web service and I want to have an autocomplete feature when user is starting to type in input field, and when some country was selected to display an info about it. Want to do it with factories or maybe a directive, don't know what solution is the best
  Here is what I have for now:</p>
  
  <p>REST service link: <a href="https://restcountries.eu/" rel="nofollow">https://restcountries.eu/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container" ng-controller="CountriesController"&gt;
      &lt;h3 id="title"&gt;Countries Database&lt;/h3&gt;
      &lt;input type="text" id="countrySearch" ng-model="selected" typeahead="country for country in countries | limitTo:8" /&gt;
  
      &lt;ng-view&gt;&lt;/ng-view&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Template:</strong></p>
  
  <pre><code>&lt;div ng-controller="CountriesController"&gt;
  &lt;ul&gt;
      &lt;li ng-repeat="country in countries" id="countryInfo"&gt;
          &lt;p&gt;&lt;b&gt;Country:&lt;/b&gt; {{country.name}}&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Native Name:&lt;/b&gt; {{country.nativeName}}&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Capital:&lt;/b&gt; {{country.capital}}&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Region:&lt;/b&gt; {{country.region}}&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Subregion:&lt;/b&gt; {{country.subregion}}&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Borders:&lt;/b&gt; {{borders}}&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Languages:&lt;/b&gt; {{languages}}&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Population:&lt;/b&gt; {{country.population}} people&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Area:&lt;/b&gt; {{country.area}} sq.km&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Currencies:&lt;/b&gt; {{currencies}}&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Timezones:&lt;/b&gt; {{timezones}}&lt;/p&gt;
          &lt;p&gt;&lt;b&gt;Calling Code:&lt;/b&gt; +{{callingCodes}}&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>app.controller('CountriesController', function ($scope, CountriesFactory) {
  
  CountriesFactory.getCountry().then(function (data) {
      $scope.selected = undefined;
      $scope.countries = data;
      console.log($scope.countries);
  
      $scope.timezones = data[0].timezones.toString();
      $scope.languages = data[0].languages.toString();
      $scope.currencies = data[0].currencies.toString();
      $scope.borders = data[0].borders.toString();
      $scope.callingCodes = data[0].callingCodes.toString();
  });
  
  });
  </code></pre>
  
  <p><strong>Factory:</strong></p>
  
  <pre><code>app.factory('CountriesFactory', function ($http, $q) {
  return {
      getCountry: function () {
          var input = $('#countrySearch').val();
          var request = 'https://restcountries.eu/rest/v1/name/';
          var url = request + input;
  
          return $http.get(url);
      }
  }
  });
  </code></pre>