Same parameter got passed into HTML but not button

Question

I am trying to pass a parameter in angularjs. Please note the {{dish.id}} appear twice below, one was correctly passed, the other failed.

the html template is

<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>

the function in the controller is

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

However, the weird thing is for the two {{dish.id}} in the view, the one in html was correctly displayed while the one to pass into the fucntion is "undefined"

Could someone kindly help me on resolving this? Kinda be stuck here for a few days and couldnt figure out myself.

Thanks!

Answer 1

Get rid of interpolation in ng- prefixed html attributes, those are handling by $scope.$apply() method

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