使用默认下拉菜单设置ng-grid数据

Question

这是我所拥有的简化版本。我有两张桌子：FoodType和Food。 FoodType有饮料和沙漠。列是Id和Name。食物有可乐，雪碧，根啤酒，馅饼，蛋糕和冰淇淋。此表中的列是Id，Name和FoodTypeId（FK）。

在我的页面上，我有一个FoodType的下拉菜单和Food的网格。当用户选择FoodType时，相关的食物显示在ng-grid中。这很有效。

用户登录并将其默认食物类型ID与其用户名相关联。当页面加载时，默认食物类型显示为下拉菜单，但所有食物显示在网格中。我无法理解为什么。有谁能看到？

<select ng-model="vm.selectedFoodType"
                        ng-options="foodType.Id as foodType.Name for foodType in vm.foodType"
                        ng-change="vm.foodGridOptions.filterOptions.filterText = vm.selectedFoodType ? 'FoodTypeId:' + vm.selectedFoodType : ''"
                        class="form-control">
                    <option value="">- Select Food Type -</option>
                </select>

function getFood() {
        return datacontext.getFood()
            .then(function (response) {
                return vm.food = response.data;
            })
            .catch(function (exception) {
                logError('Call to Get Food Failed.' + exception.data.ExceptionMessage, null, true)
            });
    }


function getFoodType() {
        return datacontext.getFoodType()
            .then(function (response) { return vm.foodType = response.data; })
            .catch(function (exception) { logError('Call to Get Food Type  Failed: ' + exception.data.ExceptionMessage, null, true) });
    }


vm.foodGridOptions = {
        data: 'vm.food',
        enableRowSelection: true,
        multiSelect: false,
        columnDefs: [
            { field: 'FoodTypeId', displayName: 'FoodTypeId', visible: false },
            { field: 'Name', displayName: 'Food', minWidth: 250, width: 'auto', resizable: true },

        ],
        filterOptions: { filterText: vm.selectedFoodType, useExternalFilter: false },
        sortInfo: { fields: ['vm.food.Name'], directions: ['asc'] },
        afterSelectionChange: function (rowItem) {
            if (!rowItem.selected)
                return;

            vm.importLog = rowItem.entity;
            vm.appyDisabled = false;

        }
    };
 function getDefaultFoodType() {
        return datacontext.getUser(user.username)
            .then(function (response) {
                vm.selectedFoodType = response.data.DefaultFoodTypeId;
            });
    }