title: Cannot access proper firebase item key to pass to delete function
body: <p>Having a sticky issue with firebase. I am trying to get access to the long format ID which firebase auto-generates for each collection item (eg. -JgnIsMlTLaPuDMEtQP2) to pass to my delete function. I previously got it to work in a different angular app as follows:</p>
  
  <p>HTML </p>
  
  <pre><code>    &lt;tbody ng-repeat="(key,employee) in employees"&gt;
          &lt;tr&gt;
              &lt;td&gt;{{employee.employeeName}}&lt;/td&gt;
              &lt;td&gt;{{employee.employeeAge}}&lt;/td&gt;
              &lt;td&gt;{{key}}&lt;/td&gt; // the key param appeared perfectly in this case
              &lt;td&gt;
              &lt;button class="btn btn-danger" 
                  ng-click="deleteEmployee(key, employee.employeeName)"&gt;
                  delete &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>    $scope.deleteEmployee = function(key,name) {
        // get ref to db collectionvar employeeRef = new Firebase("https://xxxxxxx.firebaseio.com/Employees");
        // append item key to the path and run remove method
        var newRef = employeeRef.child(key);
        newRef.remove();
        // confirm delete
        alert(name + " has been deleted");    
      }
  </code></pre>
  
  <p>The above code receives the correctly formatted key and deletes the item perfectly - which is immediately reflected in the view.</p>
  
  <p>However, I'm trying it with a different app and the key value is being set to an incremental index (eg. 0,1,2,3,4...) and so it doesn't work when passed to the delete function. Here is the new code.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;ul id="messages" ng-show="messages.length"&gt;
          &lt;li ng-repeat="(key, message) in messages | reverse"&gt;{{message.text}}
              &lt;small&gt;{{key}}&lt;/small&gt; // WRONG VALUE DISPLAYED HERE
              &lt;button class="btn btn-xs btn-danger" ng-click="delMessage(key)" label="Remove"&gt;Delete&lt;/button&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>//delete message 
  $scope.delMessage = function(messageKey) {
    var messageRef = new Firebase('https://xxxxxx.firebaseio-demo.com/messages/');
        // append item key to the path and run remove method
    var messageRef = messageRef.child(messageKey);
    if( messageRef ) {
      messageRef.remove();
      console.log("DEL: " + messageRef); // this logs the endpoint with index number 
      console.log("Message removed successfully!");
    } else {
      console.log("uh oh...problem!");
    }
  };
  </code></pre>
  
  <p>The format of messageRef when logged to console is </p>
  
  <pre><code>https://xxxxxx.firebaseio-demo.com/messages/2
  </code></pre>
  
  <p>but instead should be </p>
  
  <pre><code>https://xxxxxx.firebaseio-demo.com/messages/-JgnIsMlTLaPuDMEtQP2
  </code></pre>
  
  <p>I have tried every combination that I could find to get it to work but nothing fixes it so far. I'm not sure why it would work in the first piece of code and not the second. The only thing I can add is the app that isn't working was created via firebase-tools in the terminal whereas the working app is just some angular code with firebase bolted on. I have also tried changing remove() to $remove but that throws undefined method errors. I'm totally stumped. Any assistance is appreciated.</p>