title: how to show different pop up on click of button in ionic?
body: <p>I am trying to show some modal pop up on a button click. I am able to display pop up but I am trying to display different pop up on the button click. In my code I take different HTML of pop up but when I click any button it show same pop up.Could you please tell me how to show different pop up screen on different button click </p>
  
  <p>Here is my different pop up screen</p>
  
  <pre><code>   &lt;script id="templates/modal.html" type="text/ng-template"&gt;
        &lt;ion-modal-view&gt;
          &lt;ion-header-bar class="bar bar-header bar-positive"&gt;
            &lt;h1 class="title"&gt;New Contact&lt;/h1&gt;
            &lt;button class="button button-clear button-primary" ng-click="modal.hide()"&gt;Cancel&lt;/button&gt;
          &lt;/ion-header-bar&gt;
          &lt;ion-content class="padding"&gt;
            &lt;div class="list"&gt;
              &lt;label class="item item-input"&gt;
                &lt;span class="input-label"&gt;First Name&lt;/span&gt;
                &lt;input ng-model="newUser.firstName" type="text"&gt;
              &lt;/label&gt;
              &lt;label class="item item-input"&gt;
                &lt;span class="input-label"&gt;Last Name&lt;/span&gt;
                &lt;input ng-model="newUser.lastName" type="text"&gt;
              &lt;/label&gt;
              &lt;label class="item item-input"&gt;
                &lt;span class="input-label"&gt;Email&lt;/span&gt;
                &lt;input ng-model="newUser.email" type="text"&gt;
              &lt;/label&gt;
              &lt;button class="button button-full button-positive" ng-click="modal.hide()"&gt;Create&lt;/button&gt;
            &lt;/div&gt;
          &lt;/ion-content&gt;
        &lt;/ion-modal-view&gt;
      &lt;/script&gt;
          &lt;script id="templates/copymodal.html" type="text/ng-template"&gt;
        &lt;ion-modal-view&gt;
          &lt;ion-header-bar class="bar bar-header bar-positive"&gt;
            &lt;h1 class="title"&gt;copy Contact&lt;/h1&gt;
            &lt;button class="button button-clear button-primary" ng-click="modal.hide()"&gt;Cancel&lt;/button&gt;
          &lt;/ion-header-bar&gt;
          &lt;ion-content class="padding"&gt;
            &lt;div class="list"&gt;
              &lt;label class="item item-input"&gt;
                &lt;span class="input-label"&gt;copy first Name&lt;/span&gt;
                &lt;input ng-model="newUser.firstName" type="text"&gt;
              &lt;/label&gt;
              &lt;label class="item item-input"&gt;
                &lt;span class="input-label"&gt;Last Name&lt;/span&gt;
                &lt;input ng-model="newUser.lastName" type="text"&gt;
              &lt;/label&gt;
              &lt;label class="item item-input"&gt;
                &lt;span class="input-label"&gt;Email&lt;/span&gt;
                &lt;input ng-model="newUser.email" type="text"&gt;
              &lt;/label&gt;
              &lt;button class="button button-full button-positive" ng-click="modal.hide()"&gt;Create&lt;/button&gt;
            &lt;/div&gt;
          &lt;/ion-content&gt;
        &lt;/ion-modal-view&gt;
      &lt;/script&gt; 
  </code></pre>
  
  <p><strong>js file</strong>
  // Code goes here</p>
  
  <pre><code>angular.module('ionicApp', ['ionic'])
  
  .controller('AppCtrl', function($scope, $ionicModal) {
  
  $scope.firstpopup=function(){
    $scope.modal.show()
  }
  
  
  $scope.secondpopup=function(){
    $scope.modal.show()
  }
    $ionicModal.fromTemplateUrl('templates/modal.html', {
      scope: $scope
    }).then(function(modal) {
      $scope.modal = modal;
    });
  
  
    $ionicModal.fromTemplateUrl('templates/copymodal.html', {
      scope: $scope
    }).then(function(modal) {
      $scope.modal = modal;
    });
  
  });
  </code></pre>
  
  <p>here is my code
  <a href="http://plnkr.co/edit/KXzUO5OL6Imy9yKP0Ktq?p=preview" rel="nofollow">http://plnkr.co/edit/KXzUO5OL6Imy9yKP0Ktq?p=preview</a></p>