title: Why can't I set input values when ng-model is used?
body: <p>I'm trying to populate some default fields in a form. The AngularJS way as far as I know is to use the controller to set these values. I'm using components - which I'm starting to regret given that most examples online don't use this layout.</p>
  
  <p><strong>component.js</strong></p>
  
  <pre><code>angular.
    module('patientInfo').
    component('patientInfo', {
      templateUrl: 'patient-info/patient-info.template.html',
      controller: ['$http', '$routeParams',
        function PatientInfoController($http, $routeParams, $scope) {
          var self = this;
          this.patientId = $routeParams.patientId;
  
          $http.get("patients/" + this.patientId + ".json").then(function(response) {
            self.patient = response.data;
          });
        }
      ]
    });
  </code></pre>
  
  <p><strong>template.html</strong></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;h1&gt;{{$ctrl.patient[0].first_name}} {{$ctrl.patient[0].last_name}}&lt;/h1&gt;
    &lt;div class="col-md-2"&gt;
      &lt;!--Sidebar content--&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-10"&gt;
      &lt;!--Body content--&gt;
      &lt;form action="" &gt;
        &lt;p&gt;First Name: &lt;input type="text" ng-model="first_name"&gt;&lt;/p&gt;
        &lt;p&gt;Last Name: &lt;input type="text" ng-model="last_name"&gt;&lt;/p&gt;
        &lt;p&gt;Patient Date of Birth: &lt;input type="text" ng-model="patient_dob" &gt;&lt;/p&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I'd like to accomplish is to populate all those fields (name, dob) with elements from a JSON file. My problem is likely two-fold:</p>
  
  <ol>
  <li>When I write <code>$scope.first_name = "anything"</code> I'm told <code>Cannot set property 'first_name' of undefined</code>. Why is this the case?</li>
  <li>Assuming I figure out the first item, how would I go about using fields from the JSON file (self.patient or response.data)? Could I write: <code>$scope.first_name = self.patient[0].first_name</code>? My intuition is no, so what would be the proper way to both reference the JSON data inside my controller?</li>
  </ol>
  
  <p>Bonus question: What are the idiosyncrasies that one should be aware of when using a component like this as opposed to the more traditional controller definition? I'm relatively new to web development and am finding myself overwhelmed by the number of ways to accomplish the same thing. </p>
  
  <p>Sample response data would just be a JSON array with a single value:</p>
  
  <pre><code>[{"first_name": "John", "last_name": "Doe", "hospital_name": "Mayo Clinic","dob": "01/01/01"}]
  </code></pre>