title: Use Google News Search API to display news with AngularJS
body: <p>I am trying to fetch Google news with the News Search API using AngularJS, but I am having some issues. I need help please.</p>
  
  <p>Below is my HTML page where I've included  the necessary libraries AngularJS, <strong>ngAutocomplete</strong> and another Google Library. the <strong>ngAutocomplete</strong> library allows me to get basic information (such as geocoding, administrative boundaries and other geo-parameters) from the Google API, that I can then use to query the News Search API.</p>
  
  <pre><code>&lt;html lang="en" ng-app="StarterApp"&gt;
    &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"&gt;&lt;/script&gt;
      &lt;script src="script.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="ngAutocomplete.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
   &lt;body ng-controller="AppCtrl"&gt;
    &lt;form id="form" role="form"&gt;                 
       &lt;input type="text" id="Autocomplete" ng-autocomplete="result1" details="details1" options="options1"&gt;
       &lt;/input-container&gt;
       &lt;button data-ng-click="findNews(result1)"&gt;Search&lt;/button&gt;                                
    &lt;/form&gt;
   &lt;div data-ng-repeat="news in newsData"&gt;
       &lt;img src="{{news.image.url}}}"alt="{{news.title}}"&gt;
       &lt;h2&gt;{{news.title}}&lt;/h2&gt;
       &lt;p&gt;{{news.content}}&lt;/p&gt;
   &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my <strong>script.js</strong></p>
  
  <pre><code>(function(){ 
  
  'use strict;'
  angular.module('StarterApp', ['ngMaterial', 'ngAutocomplete'])
  
  .controller('AppCtrl', ['newsService', '$scope', '$mdSidenav', function(newsService, $scope, $mdSidenav){
    $scope.toggleSidenav = function(menuId) {
      $mdSidenav(menuId).toggle();
    };
  
   function fetchNews(result1){
      newsService.getNews(result1).then(function(data){
        $scope.location = data;
      });
    }
    fetchNews('San Francisco');
  
    $scope.findNews = function(result1){
      $scope.location = '';
      fetchNews(result1);
    };
  
  }])
  
  .factory ('newsService', ['$http', '$q', function($http, $q){
  
  
    function getNews(result1){
  
      var deferred = $q.defer();
      $http.get('https://ajax.googleapis.com/ajax/services/search/news?v=1.0&amp;q=' + result1)
        .success(function(data){
          newsData = data.responseData.results;
          console.log(newsData);
        })
        .error(function(err){
          console.log('Error retrieving News');
          deferred.reject(err);
        });
      return deferred.promise;
    }
    return{
      getNews:getNews
    }
  }])
  
  })();
  </code></pre>
  
  <p>When I type San Francisco, and then click the search button, the app get the user input and queries the Google News Search API and then return an object.</p>
  
  <p>The query returns a News object from the News Search API; I can see it on the console.log but unfortunately I cannot display them on the page using ngRepeat.</p>
  
  <pre><code>&lt;div data-ng-repeat="news in newsData"&gt;
    &lt;img src="{{news.image.url}}}"alt="{{news.title}}"&gt;
    &lt;h2&gt;{{news.title}}&lt;/h2&gt;
    &lt;p&gt;{{news.content}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The full code is on Plunker <a href="http://plnkr.co/4vbaWZvcSRMGXppA5sXY" rel="nofollow">http://plnkr.co/4vbaWZvcSRMGXppA5sXY</a> or <a href="http://run.plnkr.co/plunks/eevO0F/" rel="nofollow">http://run.plnkr.co/plunks/eevO0F/</a></p>