Cannot delete element using AngularFire $remove() - angularjs

Question

I am attempting to remove an item (round) from my DB. I can console.log the $id but when I try to roundsList.$remove(round.id) it does not do anything. I am, once again, thoroughly confused...
JS:
.controller('RoundsCtrl', ['$scope', '$firebase', 'FBURL', function ($scope, $firebase, FBURL, url) {
var roundsRef = new Firebase(FBURL + 'rounds');
var roundsList = $firebase(roundsRef).$asArray();
var usersRef = new Firebase(FBURL + 'users');
var usersRef = usersRef.child($scope.loggedInUserID).child('rounds');
var usersRounds = $firebase(usersRef).$asArray();
$scope.removeItem = function (index, round, event) {
// Avoid wrong removing
if (round.$id == undefined) return;
// Firebase: Remove item from the list
$scope.roundsList.$remove(round.$id);
};
/* SET DEFAULT FOR TOGGLE TO COLLAPSED*/
$scope.isCollapsed = true;
/* ONCE ROUNDS ARE LOADED RETURNS ROUNDS BY ID FOR INDIVIDUAL USER*/
usersRounds.$loaded()
.then(function (data) {
$scope.rounds = data.map(function (item) {
console.log(item);
console.log(item.$id);
return roundsList.$getRecord(item.roundID);
});
});}])
HTML:
<tbody ng-repeat="round in rounds | orderBy:orderBy">
<tr>
<td>
{{round.date}}
</td>
<td>
{{round.courseName}}
</td>
<td>
{{round.courseID}}
</td>
<td>
{{round.user}}
</td>
<td>
{{round.userID}}
</td>
<td>
{{round.tags}}
</td>
<td>
View
Edit
<button class="btn btn-danger" ng-click="isCollapsed = !isCollapsed">Delete</button>
</td>
</tr>
<tr collapse="isCollapsed">
<td colspan="7">
<div>
<div class="well well-lg">
<p>Are you sure? This cannot be undone!</p>
<button ng-click="removeItem($index, round, $event)" class="btn btn-danger">Delete Round</button>
<button ng-click="isCollapsed = !isCollapsed" class="btn btn-info">Cancel</button>
</div>
</div>
</td>
</tr>
</tbody>
EDIT:
I was finally able to delete from both DBs using the following code. hope it helps someone else down the line.
/* DELETES ROUND FROM MAIN ROUND DATABASE AND FROM USER SPECIFIC DB*/
var roundsListSync = $firebase(roundsRef);
var usersRoundsListSync = $firebase(usersRefRounds);
$scope.removeItem = function (index, round, event) {
roundsListSync.$remove(round.$id);
//console.log(usersRounds);
var i = 0;
var len = usersRounds.length;
for (; i < len;) {
console.log(usersRounds[i].roundID);
if (usersRounds[i].roundID === round.$id) {
var usersRoundsID = usersRounds[i].$id;
//console.log(usersRoundsID);
usersRoundsListSync.$remove(usersRoundsID);
i++;
} else {
i++;
}
}
};

Answer 1

You are calling $scope.roundsList.$remove(round.$id), however you have not declared roundsList in the scope: var roundsList = $firebase(roundsRef).$asArray(); Try var roundsList = $firebase(roundsRef).$asArray() instead.
If that doesn't work, try to make a firebase reference that is not an array:
var roundsListSync = $firebase(roundsRef);
roundsListSync.$remove(round.$id);