Clear Angular-UI Grid when Clear option selected from dropdown

Question

I have a dropdown that display order options. Depending on what is selected from the dropdown an Angular-UI grid is populated. The issue is when "-Select Order-" is selected all the orders for all users displayed. I'm trying to figure out how to clear the grid when that option is selected.

<div class="row">
            <div class="col-md-8">
                <select ng-model="vm.selectedOrder"
                        ng-options="order.Id as order.Name for order in vm.orders"
                        ng-change=" vm.selectedOrder ? 'OrderId:' + vm.selectedOrder : ''"
                        class="form-control">
                    <option value="">- Select Order -</option>
                </select>

            </div>
        </div>
        <div class="row">
            <div class="col-md-8">
                <div class="gridStyle" ng-grid="vm.gridOptions"></div>
            </div>
        </div>

Here is the grid:

vm.gridOptions = {
        data: 'vm.orders',
        enableRowSelection: false,
        columnDefs: [
            { field: 'Orders.OrderId', displayName: 'OrderId', visible: false },
            { field: 'Orders.Name', displayName: 'Orders', minWidth: 100, width: 'auto', resizable: true },
            { field: 'InvoiceName', displayName: 'Invoice', minWidth: 150, width: 'auto', resizable: true },
            }
        ],
        filterOptions: { filterText: vm.selectedOrder, useExternalFilter: false },
         }
    };

I tried creating a function vm.clear() what sets vm.orders = '' which works when I select the "-Select Order-" option. However when I select any of the other options the grid doesn't populate.

Any ideas?

Answer 1

This may be a bit of a hack but since I got no response I'm going with it as I'm running out of time. For this:

ng-change=" vm.selectedOrder ? 'OrderId:' + vm.selectedOrder : ''"

I changed it to this:

ng-change=" vm.selectedOrder ? 'OrderId:' + vm.selectedOrder : 'clear'"