title: Nested objects and ng-models in Angular-JS
body: <p>I am looking for solution for a problem which might not exist the way I am trying to do it. So if anyone can help me with the best way of doing this. </p>
  
  <p>ISSUE:</p>
  
  <p>I have the following input field:</p>
  
  <pre><code> &lt;input type="text" placeholder="quote" ng-model="person.quotes.quote"&gt;
   &lt;input type="text" placeholder="author" ng-model="person.author"&gt;
   &lt;input type="text" placeholder="category" ng-model="person.category"&gt;
  </code></pre>
  
  <p>And I have the following object:</p>
  
  <pre><code>$scope.person = {
  author: $scope.author,
  category: $scope.category,
  quotes: [{quote: $scope.quote}]
  };
  </code></pre>
  
  <p>I am trying to get the value person.quote into the array of quotes. But I can't seem to do it. </p>
  
  <p>REASON:</p>
  
  <p>The reason why I am doing this is that when a user fills the input fields and clicks on a button the values are saved into the $scope.person object. And that I push that entire object to my firebase API. I want to maintain the structure of my $scope.person object as I have described in my javascript the same in my firebase API. I can easily push author and category but the nested quotes objects are not being pushed.</p>
  
  <p>THE ERROR I GET:</p>
  
  <p>Error: Firebase.set failed: First argument contains undefined in property 'quotes.0.quote'</p>
  
  <p>Thanks in advance and if this information is not enough please let me know so i can provide with more information.</p>