クラウドでできるHTML5ハイブリッドアプリ開発
http://www.amazon.co.jp/dp/4798140287/ref=rdr_ext_tmb

という本のP305に乗っている天気予報のアプリを動作させたいのですが、うまく動きません。情報が古くなってしまっているのでしょうか？

新規プロジェクトの際に「Onsen UI Sliding Menu」を選択し、
index.htmlの内容を下記の内容に書き換えました。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css"></link>
    <link rel="stylesheet" href="css/style.css"></link>
    <style>
       .weather{
             text-align: center;
             font-size: 40px;
             margin-top: 100px;
        }
        .description{
             font-size: 20px;
        }
    </style>
    <script>
        var module = ons.bootstrap();
        module.controller('AppController',function($scope,$http){
          var config = {
                params:{q:'Tokyo,jp'}
          }
          $http.get("http://api.openweathermap.org/data/2.5/weather",config)
          .success(function(data){
                $scope.weather = data.weather[0].main;
                $scope.description = data.weather[0].description;
                $scope.icon = data.weather[0].icon;
          })
          .error(function(){
                alert('天気情報の取得に失敗しました');            
          });
        });
      </script>
</head>
<body>
  <ons-page ng-controller="AppController">
    <ons-toolbar>
      <div class="center">東京の天気</dir>
    </ons-toolbar>
    <div class="weather">
      <img ng-src="http://openweathermap.org/img/w/{{icon}}.png">
      <br>
      {{weather}}
      <div class="description">{{description}}</div>
    </div>
  </ons-page>
</body>
</html>

実行すると必ず、「天気情報の取得に失敗しました」が表示されます。
内容が古くなってしまっているのでしょうか？
amazonでレビューを見るなどしましたが、動かなくなっているという情報もなく問題点が探せ出せません。
お分かりになる方いらっしゃいましたら教えていただけると助かります。
よろしくお願いします。