title: How to add objects to a key within another dynamically created object in Angular?
body: <p>I'm using Angular to create a list app. For testing purposes I have two pre-created lists each with pre-created names and items. Eventually the user will initially be presented with an empty list to which they can add items. Then they can add a new list for new items. So far I have the ability to add and remove items to and from the existing list, and I can add a new list. But I can't add new items to a newly created list. I get a "Cannot read property 'push' of undefined" error for the line <code>list.items.push(this.item);</code>. My guess is that when I create a new list, there is no <code>items</code> key added to it and that's why it's undefined. I tried creating an <code>items</code> key when I create a new list, but I couldn't get it to work. That might not be the problem anyway. </p>
  
  <p><a href="https://codepen.io/anon/pen/oWRQvQ" rel="nofollow noreferrer">https://codepen.io/anon/pen/oWRQvQ</a></p>
  
  <p>Here's the markup:</p>
  
  <pre><code>&lt;div ng-app="notepadApp"&gt;
      &lt;div ng-controller="notepadController as notepadCtrl"&gt;
          &lt;header ng-repeat="list in notepadCtrl.lists"&gt;
              &lt;div&gt;Delete list&lt;/div&gt;
              &lt;h1&gt;{{list.name}}&lt;/h1&gt;
          &lt;/header&gt;
          &lt;div ng-repeat="list in notepadCtrl.lists" class="shoppingList" ng-controller="ItemController as itemCtrl"&gt;
              &lt;ul&gt;
                  &lt;li ng-repeat="item in list.items"&gt;
  
                      &lt;label&gt;
                          &lt;input type="checkbox" ng-model="item.checked"&gt;
                          {{item.name}}
                      &lt;/label&gt;
                      &lt;form name="itemForm" ng-submit="itemCtrl.removeItem(list, $index)"&gt;
                          &lt;input type="submit" value="remove"&gt;
                      &lt;/form&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;form name="itemForm" ng-submit="itemCtrl.addItem(list)"&gt;
                  &lt;input type="text" ng-model="itemCtrl.item.name"&gt;
                  &lt;input type="submit" value="Add item"&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
          &lt;form name="addListForm" ng-submit="notepadCtrl.addList(lists)"&gt;
              &lt;input type="text" ng-model="notepadCtrl.list.name"&gt;
              &lt;input type="submit" value="Add list"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This script is:</p>
  
  <pre><code>(function(){
  
  var app = angular.module('notepadApp', []);
  
  var shoppingLists = [
      {
          name: 'groceries',
          items: [
              {
                  name: 'milk',
                  checked: false
              },
              {
                  name: 'eggs',
                  checked: false
              }
          ]
      },
      {
          name: 'cvs',
          items: [
              {
                  name: 'pills',
                  checked: false
              },
              {
                  name: 'cotton balls',
                  checked: false
              },
              {
                  name: 'razors',
                  checked: false
              }
          ]
      }
  ];
  
  
  app.controller('notepadController', function(){
      this.lists = shoppingLists;
      this.list = {};
  
      this.addList = function() {
          this.lists.push(this.list);
          this.list = {};
      };
  
  });
  
  app.controller('ItemController', function(){
      this.item = {};
  
      this.addItem = function(list){
          list.items.push(this.item);
          this.item = {};
      };
  
      this.removeItem = function(list, index) {
          list.items.splice(index, 1);
      };
  });
  })();
  </code></pre>