Javascript 已将相同参数传递到HTML中，但未传递到按钮

我试图在angularjs中传递一个参数。请注意{{dish.id}}在下面出现两次，一次正确通过，另一次失败

html模板是

<ion-popover-view>
  <ion-content>
  <button class="button button-full button-light" ng-click="addFavorite({{dish.id}})">
        Add to favorites: dish {{dish.id}} 
  </button> 

  <button class="button button-full button-light" ng-click="addComment()">Add comment</button>    
  </ion-content>
</ion-popover-view>

然而，奇怪的是，对于视图中的两个{dish.id}，html中的一个被正确显示，而传递到函数中的一个是“未定义的”

有人能帮我解决这个问题吗？有点被困在这里几天，我自己也不明白

---

谢谢

去掉ng前缀html属性中的插值，这些属性由$scope.$apply（）方法处理

---

从我的同学那里找到了答案，我不应该在向javascript方法传递参数时使用手柄(╯‵□′)╯︵┻━┻

    $scope.addFavorite = function (index) {
    console.log("added from DishDetail: index is " + index);
    favoriteFactory.addToFavorites(index);
    console.log("finished");
    }

<button class="button button-full button-light" ng-click="addFavorite(dish.id)">