Using single ionicmodal for multiple repeats

I am creating a hybrid mobile app with ionic framework, and I am using a ionicmodal with some radio options for selecting. But my problem is that I am having multiple divs from ng-repeat and each should have the modal box option so that they can select the options I am giving in the modal box, have a look at my code and tell me whether i should do any improvements to it.

My view

<div class="list_of_plans">
 <div class="day_plan" ng-repeat="day in totalDays" id="item{{day.d_num}}">
  <div class="day_plan_bar">
    <div class="edit_section" ng-click="{{'show'+day.d_num+'=!show'+day.d_num}};"></div>
    <div class="title_section">{{day.text}}</div>
    <div class="duplicate_section" ng-click="daysPush()"></div>
    <div class="add_section"></div>
  </div>
  <div class="plan_form" ng-hide="{{'!show'+day.d_num}}">
      <div class="list">
        <label class="item item-input" ng-click="openModal()">
          <span class="input-label">Breakfast</span>
          <span contentEditable=true data-ph="Choose breakfast Recipe">{{breakfast.favourite}}</span>
          <input type="hidden" value="{{breakfast.favourite}}">
        </label>
        <label class="item item-input">
          <span class="input-label">Lunch</span>
          <input type="text">
        </label>
        <label class="item item-input">
          <span class="input-label">Snack</span>
          <input type="text">
        </label>
        <label class="item item-input">
          <span class="input-label">Dinner</span>
          <input type="text">
        </label>
      </div>
    </div>
  </div>
</div>

My Modal Template

<div class="modal">
<ion-header-bar>
  <h1 class="title">Breakfast Recipes</h1>
</ion-header-bar>
<ion-content>
  <div class="list">
    <label class="item item-radio" ng-repeat="breakfastRecipe in breakfastRecipes" for="{{breakfastRecipe.id}}" ng-click="closeModal()">
      <input type="radio" ng-model="breakfast.favourite" value="{{breakfastRecipe.name}}" id="{{'breakfast'+breakfastRecipe.id}}" name="breakfastOptions">
      <div class="item-content">
        {{breakfastRecipe.name}}
      </div>
      <i class="radio-icon ion-checkmark"></i>
    </label>
  </div>
</ion-content>
</div>

My Controller

.controller('createCtrl', function($scope, $ionicModal) {

  $scope.breakfastRecipes = [{id : 1, day : 1, name : 'BreakfastRecipe1'},{id : 2, day : 1, name : 'BreakfastRecipe2'},{id : 3, day : 1, name : 'BreakfastRecipe3'},{id : 4, day : 1, name : 'BreakfastRecipe4'}];
  $scope.breakfast = [];

  $scope.totalDays = [{ 
     d_num : 1,
     text : "Day 1",
  }];

  $scope.daysPush = function() {
    $scope.totalDays.push({ 
      d_num : $scope.totalDays.length + 1,
      text : 'Day ' + ($scope.totalDays.length + 1)
    });
  };

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

  $scope.openModal = function() {
    $scope.modal.show();
  }

  $scope.closeModal = function() {
    $scope.modal.hide();
  };

  $scope.$on('$destroy', function() {
     $scope.modal.remove();
  });

})

Please help me out on this one,

Thanks in advance