title: Trouble with nested nodes with using Firebase + AngularJS for a chat app
body: <p>I am trying to create a small chat app to help me learn AngularFire (Firebase + AngularJS).  The only functionality i am trying to get is the ability to create chat rooms and then the ability to chat in each room.  By the way, i'm doing this in Rails if it matters (my user login and everything is handled through Rails).</p>
  
  <p>So far i have this as my sample code, this is what the view looks like:</p>
  
  <pre><code>&lt;div ng-controller="RoomsCtrl"&gt;
  
    &lt;div ng-repeat="rm in rooms"&gt;
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li class="message phm pvm pull-left" ng-repeat="msg in messages"&gt;
            &lt;span class="message-author"&gt;{{msg.from}}&lt;/span&gt;
            &lt;span class="message-body"&gt;{{msg.body}}&lt;/span&gt;
            &lt;span class="message-timestamp"&gt;{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}&lt;/span&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;form&gt;
        &lt;span class="hidden"&gt;&lt;%= current_user.full_name %&gt;&lt;/span&gt;
        &lt;textarea ng-model="msgBody" ng-keydown="addMessage($event)" placeholder="What's on your mind..."&gt;&lt;/textarea&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  
    &lt;form&gt;
      &lt;input type="text" ng-model="roomName" ng-keydown="addRoom($event)" placeholder="Enter a room name..."&gt;&lt;
    &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my AngularFire script:</p>
  
  <pre><code>var app = angular.module("ChatApp", ["firebase"]);
  
  function RoomsCtrl($scope, $firebase) {
      var organizationId;
  
      if (gon) {
          organizationId = gon.organization_id;
      }
  
      var orgRef = new Firebase("https://glowing-fire-7051.firebaseio.com/"+organizationId);
  
      $scope.rooms = $firebase(orgRef);
  
      $scope.addRoom = function(e) {
          if (e.keyCode != 13) return;
          $scope.rooms.$add({name: $scope.roomName, timestamp: new Date().getTime()})
          $scope.roomName = "";
          e.preventDefault();
      }
  
      $scope.messages = $firebase(orgRef);
  
      $scope.addMessage = function(e) {
          if (e.keyCode != 13) return;
          $scope.messages.$add({name: $scope.msgName, body: $scope.msgBody, timestamp: new Date().getTime()})
          $scope.msgBody = "";
          e.preventDefault();
      }
  }
  </code></pre>
  
  <p>Each user <code>belongs_to</code> and <code>Organization</code> as you can see by the <code>gon</code> part that is just getting the id of the organization that the <code>current_user</code> belongs to.  The code i have for the <code>addRoom</code> does actually create a room under the organization.  The Forge data looks like this:</p>
  
  <pre><code>&lt;my forge id&gt;
      1
           JHiiMka5OloVaqf-sA7
               name: "Test Room"
               timestamp: 1394500795299
           JHjA0rwIDJNVDU4HVaF
               name: "Another Room"
               timestamp: 1394508307247
  </code></pre>
  
  <p>I am also seeing the data being reflected on the site as well.  When i create a new room, the room displays on the site.  My problem (i think) lies only with the <code>messages</code>.  I have been researching for hours with little to no success on a the subject of nested references.  I kind of understand it but i haven't been able to figure out how i can create a room (dynamically through the site) and then have access to create messages under that room's node in Firebase.</p>
  
  <p>My view code above shows you how i was thinking it would display on the page.  My question is, how do i tie the two together through Firebase / AngularFire?  Thanks in advance for any help!  And let me know if you have any questions that might shed more light on anything.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I sent this question to Firebase support through their website and received a response helping me with almost all of it.  I sent a follow up email to get clarification on a section i'm not understanding in their response and waiting to here back.  Their advice was to replace:</p>
  
  <pre><code>var orgRef = new Firebase("https://glowing-fire-7051.firebaseio.com/"+organizationId);
  </code></pre>
  
  <p>with</p>
  
  <pre><code>var orgRef = new Firebase("https://glowing-fire-7051.firebaseio.com/").child(organizationId);
  </code></pre>
  
  <p>That would create a new Firebase reference for a child of an existing location.  Then they said to use this for my <code>$scope.messages</code> definition:</p>
  
  <pre><code>$scope.messages = $firebase(orgRef.child(roomID).child("messages"));
  </code></pre>
  
  <p>This would assume that in /1/room/ there is a child named “messages” which holds your messages.</p>
  
  <p>The part i am having trouble with is the <code>.child(roomID)</code> in the messages definition because it is telling me it is undefined (which it is).  What should that be defined as...i'm assuming it should be the ID of the newly created room?</p>