title: show rest api json response like textbox autopopulate using angular js
body: <p>I'm accessing address lookup rest API service - JSON response. I want to show my JSON response like auto-dropdown list. Rest service result has 5 JSON array list for all my search but in my below code that JSON result again filter based on the value entered in the textbox.</p>
  
  <p><a href="http://jsfiddle.net/3etbtfwL/230/" rel="nofollow noreferrer">http://jsfiddle.net/3etbtfwL/230/</a></p>
  
  <p>Test Case# 
  1) Entered 'google' in textbox rest service returns 5 JSON array list is showing auto populate result in textbox like this - <strong>Pass</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ALHu1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ALHu1.jpg" alt="enter image description here"></a></p>
  
  <p>2) Entered 'google drive' in textbox - rest service actually returns 5 JSON array list correctly but no value is showing in the text box auto-populate list - <strong>Fail</strong>
  (Reason - My entered value is not matched with JSON return list value)</p>
  
  <p><a href="https://i.stack.imgur.com/xy77q.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xy77q.jpg" alt="enter image description here"></a></p>
  
  <p>How to show all the value which is return from JSON result like textbox auto-populate. </p>
  
  <p><strong>Angular code</strong></p>
  
  <pre><code>var app = angular.module('httpApp', []);
  
  app.controller('httpAppCtrlr', function ($scope, $http) {
  
       $scope.AddressLookup = function (address) {                 
       $http.get('http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?text=' + address + '&amp;f=json')
          .then(function (results) {
             $scope.items = results.data.suggestions;        
      });
      }
  });
  </code></pre>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;div data-ng-app='httpApp' data-ng-controller='httpAppCtrlr'&gt;
      &lt;input type="text" data-ng-model="item.text" list="comicstitle" 
                 placeholder="Address Lookup"
                 ng-change="AddressLookup(item.text)"
                 &gt;
          &lt;datalist id="comicstitle"&gt;
              &lt;option ng-repeat="item in items" value="{{item.text}}" &gt;{{item.text}}&lt;/option&gt;
          &lt;/datalist&gt;
  &lt;/div&gt;
  </code></pre>