ionicModal inside ng-repeat loop


I am building a app in which i need multiple modals, and the behavior will be same as shown in this link. How can we achieve the same in ionic.

Do not create multiple modals if they are very alike. Just create one and pass in the scope:


<div class="modal transparent"
    <h1>{{ }}</h1>


$ionicModal.fromTemplateUrl('templates/myModal.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function(modal) {
    $scope.modal = modal;

$scope.persons = [{name: "AB"}, {name: "BC"}, {name: "CD"}];

Then when opening define the stuff you want in the modal:

// Open modal
$scope.openPerson = function(index) {
    $scope.person = $scope.persons[index];

Hi @devqon1,

thanks for your reply, but when i am implementing it i am getting blank screen, can you make a fiddle of it, so i can get it.

Check out this codepen:

1 Like

Thank you very much @devqon1, i have a small doubt regarding this one. How to bind a input value in ionicmodal to the person names which are in the list. Check this pen, here when we are entering a value it is coming for all the three names, can we make it a one to one binding like if we type in Gordon Freeman modal it should come under Gordon Freeman name only.

Because you display the favourites from the currentPerson, not from the contact in the ng-repeat. So instead of:


you should write:

1 Like