我需要在此Angular下拉列表中获取当前所选选项的值

Question

我有一个页面上有很多食物。对于每种食物，用户可以从单位列表中进行选择，并使用AngularUI滑块输入数量。

我想构建一个数组，其中包含页面上已输入值的食品，包括这些值。目前，这是为了获得food.slider的价值：

模板：

 <div ui-slider="{range: 'min'}" min="0" max="50" ng-model="food.slider" ng-change="addSelection(food)">

JS：

   //Add changed food to array 
   $scope.editedFood = [];

  $scope.addSelection = function addSelection(food) {
  var idx = $scope.editedFood.indexOf(food);

  // is currently selected
  if (idx === -1) {
    $scope.editedFood.push(food);
  }

  };

更改单位下拉列表也可以将食物添加到editedFood数组，但它不会传递所选单位的值。如何获取当前所选食品单位选项的标题或索引，并在editedFood数组中自动更新？我已尝试过以下几种变体：

 <select ng-options="unit.title for unit in food.unit" ng-model="food.unit.selected" ng-change="addSelection(food, unit.selected)"></select>

Here's my Plunkr.

更新：

我可以处理的一个问题是我在输入元素中使用了两个不同的模型：滑块中的food.slider（正在工作）和select中的food.unit.selected（它不起作用）。

我想要实现的是：如果滑块或下拉列表被更改，我想知道滑块（food.slider）和select（food.unit.selected）的当前状态，并跟踪这些在我的editedFood数组中。这适用于通过food.slider输入，但不适用于food.unit.selected select。