Untitled

<!DOCTYPE html>
<html>

  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.3.0-beta.19" data-semver="1.3.0-beta.19" src="https://code.angularjs.org/1.3.0-beta.19/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="Ajax">
    <div ng-controller="WeatherCtrl">
      <pre>{{weather | json}}</pre>
    </div>
  </body>

</html>

// Code goes here
angular.module("Ajax", [])
  .controller("WeatherCtrl", function($ajax, $scope) {
    $ajax({
      url: "http://api.openweathermap.org/data/2.5/weather?q=London,uk",
      dataType: "JSONP"
    }).done(function(weather) {
      $scope.weather = weather;
    });
  });

(function($) {
  function Ajax($rootScope, $dfd) {
    var ajax = jQuery.ajax;
    
    return function(options) {
      var promise = ajax(options),
          dfd = $dfd();
          
      promise.done(function(data) {
        $rootScope.$apply(function() {
          dfd.resolve(data);
        });
      }).fail(function() {
        var failArgs = arguments;
        
        $rootScope.$apply(function() {
          dfd.reject.apply(dfd, failArgs);
        });
      });
      
      return dfd.promise();
    };
  }
  
  Ajax.$inject = ['$rootScope', '$dfd'];
  
  angular.module("Ajax")
    .provider("$ajax", function() {
      this.defaults = {};
      
      this.setOptions = function() {
        $.ajaxSetup(this.defaults = options);
      };
      
      this.getOptions = function() {
        return this.defaults;
      };
      
      this.$get = Ajax;
    });
}(jQuery));

(function($) {
  function Dfd() {
    return function() {
      return jQuery.Deferred();
    };
  }

  angular.module("Ajax")
    .factory("$dfd", Dfd);
}(jQuery));
  
/*
  $.ajax().done(function() {
    
  });
  
  $ajax({
    url: '/foo'
  }).done(function() {
    
  });
*/

/* Styles go here */