Angular array filter

Question

I have this code

function GuestWizardController($scope, ApiResourceBed, ApiResourceRoom) {
        $scope.rooms = ApiResourceRoom.query();
        $scope.showBeds = function( roomId ){
            $scope.beds = ApiResourceBed.query();
        };
        var vm = this;
        vm.data = {}
    }

ApiResourceBed and ApiResourceRoom are two factories.

I need a select element with all rooms listed. So far, so good.

The thing is that, when I select a room, it triggers showBeds function. Now, I need a way to filter the beds array. So, in a second select element, I can present only the beds asociated to the selected room.

I'm quite new to angular. Any ideas?

---

UPDATE

ApiResourceBed factory declaration:

.factory('ApiResourceBed', ['APP', '$resource', function( APP, $resource, id ){
    return $resource( APP.API_REST + 'beds/:id');
}])

Answer 1

Here it is an old answer (answered by me) in which I built 2 custom filters for filtering a select input.

2 multiple select and single option list

A different solution could be to filter the options by the selected room, but that depends on your room object, and we need some more info. This could be an example:

<select ng-model="selectedRoom" ng-options="room for room in rooms"></select>

<select ng-model="selectedBed" ng-options="bed for bed in selectedRoom.beds"></select>