Cannot delete element using AngularFire $remove()

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>
                    <a href="#/roundDetail/view/{{round.$id}}" class="btn btn-primary">View</a>
                    <a href="#/roundDetail/edit/{{round.$id}}" class="btn btn-primary">Edit</a>
                    <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);