title: Why am I getting {"readyState":1} on the DOM rather than JSON data in AngularJS?
body: <p>I'm trying to have the JSON data show up on the DOM (it's only 49 items) but I'm getting <code>{"readyState":1}</code> instead. I'm doing this mostly to test that my code is working. </p>
  
  <p>I know where the issue in the code is, I just don't know what the syntax should be. </p>
  
  <p>So my question is what do I define <code>$scope.dogs</code> as to get the JSON data to show up on the page? I have <code>{{dogs}}</code> in the HTML within the <code>'mainCtrl'</code> controller.</p>
  
  <p>Here's the JS file:</p>
  
  <pre><code>const app = angular.module('dogBreedApp', []);
  
    app.controller('mainCtrl', function($scope) {
      $scope.dogs = $.ajax(settings).done(function (response) {
      });
    });
  
    var settings = {
      "async": true,
      "crossDomain": true,
      "url": "https://dogdatabase-d31f.restdb.io/rest/dogs",
      "method": "GET",
      "headers": {
        "content-type": "application/json",
        "x-apikey": "xxxxxxxxxxxxxxxxxxxxxx",
        "cache-control": "no-cache"
      }
    }
  $.ajax(settings).done(function (response) {
    console.log(response);
  });
  </code></pre>
  
  <p>The settings variable and ajax thing was copied and pasted from the restdb.io service from where I'm pulling my JSON from and it logs the JSON just fine. </p>
  
  <p>I'm a beginner at development so I'm sure it's probably pretty simple.</p>
  
  <p>Thanks!</p>