title: Getting JSON from URL in AngularJS?
body: <p>I have a node.js server providing the AngularJS app on port 8000, and a Python server exposing data over HTTP as JSON on port 80.</p>
  
  <p>Loading in my browser <code>http://localhost:8000/app/List.html</code> renders a <a href="http://pastie.org/7912587" rel="nofollow">blank page</a>. Why?</p>
  
  <h3>Controllers.js</h3>
  
  <pre class="lang-js prettyprint-override"><code>function FooListCtrl($scope, $http) {
      $http.get('localhost/foo/list').success(function (data) {
          $scope.foo_lists = data;
      });
  }
  
  FooListCtrl.$inject = ['$scope', '$http'];
  </code></pre>
  
  <h3>List.html</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
          &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-controller="FooListCtrl"&gt;
          &lt;code&gt;{{foo_lists | json}}&lt;/code&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>curl -X GET localhost/foo/list -i</h3>
  
  <pre><code>HTTP/1.0 200 OK
  Date: Wed, 15 May 2013 18:28:49 GMT
  Server: WSGIServer/0.1 Python/2.7.4
  Content-Length: 30
  Content-Type: application/json
  
  {"Foo": ["bar", "can", "haz"]}
  </code></pre>