Parameters mixed up after calling function from Ionic modal

Question

I have a view with a simple button that opens a modal in the Ionic + Angular app. And the modal template appears correctly after clicking the button:

<ion-modal-view> <ion-header-bar> <h1 class="title">Popular tags</h1> <div class="buttons"> <button class="button button-clear button-stable" ng-click="closePopularForm()">Close</button> </div> </ion-header-bar> <ion-content> <div class="list"> <div class="item-divider text-center"> Select a tag to follow. </div> <label class="item"> <button class="button button-balanced" ng-click="addPopularTag('china')">China</button> <button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button> <button class="button button-balanced" ng-click="addPopularTag('us')">United States</button> </label> </div> </ion-content> </ion-modal-view> 

As you can see, the modad contains 3 buttons, each of which calls the same function, but with a different parameter. I have this controller containing a function:

 app.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) { $ionicModal.fromTemplateUrl('add-popular.html', { scope: $scope }).then(function(modal) { $scope.modalPopular = modal; }); $scope.closePopularForm = function() { $scope.modalPopular.hide(); }; $scope.openPopularForm = function() { $scope.modalPopular.show(); }; $scope.addPopularTag = function(poptag) { console.log(poptag); console.log('pop form submited '+poptag); }; }); 

The problem is that depending on which button is pressed in modal mode, the addPopularTag function addPopularTag called with the parameter of the first button (in this case, china ). I checked the html source of the buttons and they display correctly with different parameters.

This reproduces the problem in Codepen. You can see it in the console.

Answer 1

Replace

 <label class="item"> <button class="button button-balanced" ng-click="addPopularTag('china')">China</button> <button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button> <button class="button button-balanced" ng-click="addPopularTag('us')">United States</button> </label> 

from

 <button class="button button-balanced" ng-click="addPopularTag('china')">China</button> <button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button> <button class="button button-balanced" ng-click="addPopularTag('us')">United States</button> 

I don't know what the label does though