title: How to debug $http method in angularjs
body: <p>I am running an angularjs app and I am having trouble finding out why my <code>$http</code> call is failing.</p>
  
  <p>I type the url into the browser I always get a response.
  But when I make there url request through <code>$http</code> it fails.</p>
  
  <p>My code is:</p>
  
  <pre class="lang-js prettyprint-override"><code>.controller('StopDetailCtrl', function($scope, $http) {
      $scope.info = fetch();
  
    function fetch(){
          //This url works
          // var uriBuilder = 'http://cors-test.appspot.com/test'
          //This url doesn't
          var uriBuilder = 'http://api.translink.ca/rttiapi/v1/stops/55612?apikey=u8RWYB3HmxjsHenpDk0u'
  
      $http({
            method: 'GET',
            url: uriBuilder
          }).then(function successCallback(response) {
            console.log('Success', JSON.stringify(response));
          }, function errorCallback(response) {
            console.log('Error', JSON.stringify(response));
          });
      }
  })
  </code></pre>
  
  <p>The error I keep getting back is a json string which is not informative.</p>
  
  <pre><code>{
    "data": null,
    "status": 0,
    "config": {
      "method": "GET",
      "transformRequest": [
        null
      ],
      "transformResponse": [
        null
      ],
      "url": "http:\/\/api.translink.ca\/rttiapi\/v1\/stops\/55612?apikey=u8RWYB3HmxjsHenpDk0u",
      "headers": {
        "Accept": "application\/json, text\/plain, *\/*"
      }
    },
    "statusText": ""
  }
  </code></pre>
  
  <p>Is there something I am missing in the $http request?</p>
  
  <p>The api I am using is: <a href="https://developer.translink.ca/ServicesRtti/ApiReference" rel="nofollow">https://developer.translink.ca/ServicesRtti/ApiReference</a></p>