title: Getting data from metaweather API to angularjs page
body: <p>I'm building a simple weather app that gets the weather for any city.
  For this API there are two stages:
  1) you enter a name of a city, get its "where on earth ID" (woeid).
  2) use the woeid to search for the weather.</p>
  
  <p>This is the API: <a href="https://www.metaweather.com/api/" rel="nofollow noreferrer">https://www.metaweather.com/api/</a></p>
  
  <p>For example: 
  <a href="https://www.metaweather.com/api/location/search/?query=london" rel="nofollow noreferrer">https://www.metaweather.com/api/location/search/?query=london</a>
  You get this JSON:
  [{"title":"London","location_type":"City","woeid":44418,"latt_long":"51.506321,-0.12714"}]</p>
  
  <p>For starters, just to get the woeid would be great.
  It fails to connect to the API but when i type it manually it works.</p>
  
  <p><strong>app.js:</strong></p>
  
  <pre><code>var app = angular.module('weatherApp', []);
  app.controller('weatherCtrl', ['$scope', 'weatherService', function($scope, weatherService) {
  function fetchWoeid(city) {
      weatherService.getWoeid(city).then(function(data){
          $scope.place = data;
      });
  }
  
  fetchWoeid('london');
  
  $scope.findWoeid = function(city) {
      $scope.place = '';
      fetchWoeid(city);
  };
  }]);
  
  app.factory('weatherService', ['$http', '$q', function ($http, $q){
  function getWoeid (city) {
      var deferred = $q.defer();
      $http.get('https://www.metaweather.com/api/location/search/?query=' + city)
          .success(function(data){
              deferred.resolve(data);
          })
          .error(function(err){
              console.log('Error retrieving woeid');
              deferred.reject(err);
          });
      return deferred.promise;
  }
  
  return {
      getWoeid: getWoeid
  };
  }]);
  </code></pre>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="weatherApp"&gt;
  
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;Weather App&lt;/title&gt;
  &lt;link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /&gt;
  &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
  &lt;script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="weatherCtrl"&gt;
  &lt;form&gt;
  &lt;div class="form-group"&gt;
      &lt;input class="form-control" type="text" ng-model="city" placeholder="e.g. london" /&gt;
      &lt;input class="btn btn-default" type="submit" value="Search" ng-click="findWoeid(city)" /&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;p ng-show="city"&gt;Searching the forecasts for: {{city}}&lt;/p&gt;
  &lt;div&gt;
  &lt;h1&gt;WOEID is: {{ place }}&lt;/h1&gt;
  &lt;a ng-click="findWeather('london'); city = ''"&gt;reset&lt;/a&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>