title: Show Ionic Modal From Inside an Ionic Tab
body: <p>How do I open a modal from inside a tab's view-title, ion-nav-buttons? for example:</p>
  
  <pre><code>&lt;ion-view view-title="Users"&gt;
      &lt;ion-nav-buttons side="primary"&gt;
          &lt;button class="button button-icon icon ion-ios-minus-outline" 
              ng-click="openModal()"&gt;&lt;/button&gt;       
      &lt;/ion-nav-buttons&gt;
  ...
  </code></pre>
  
  <p>I followed <a href="https://stackoverflow.com/questions/30602797/how-to-open-an-ionic-modal-from-an-ionic-tab">How to open an Ionic Modal from an Ionic Tab</a> but it creates a tab that when pressed calls openModal(). I want to call openModal from a button on the title bar. I would also like to create only one controller for the modal that can be called from each tab. Is this possible and how would it be done? </p>
  
  <p>Also note, I plan to show a list of objects in the modal. When an object is selected it will change the content of the tabs. Let me know if there might be an easier way to accomplish what I'm trying other than a modal.</p>
  
  <p>Thanks!
  Mike</p>
  
  <hr>
  
  <p><strong>To further clarify</strong></p>
  
  <p>I’m new to Ionic and obviously I’m missing a key concept. In the below code I don’t know how to call methods that exist in another controller. For example, in the below code I don't know how to call the ModalController's openModal method from the FriendsCtrl's openModal method? Please see the below FriendsCtrl's openModal method.</p>
  
  <p>Here's my code...</p>
  
  <p><strong>Tabs.html</strong></p>
  
  <pre><code>&lt;ion-tabs class="tabs-icon-top tabs-color-active-positive"&gt;
  
    &lt;ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/home"&gt;
      &lt;ion-nav-view name="tab-home"&gt;&lt;/ion-nav-view&gt;
    &lt;/ion-tab&gt;
  
      &lt;!-- Chats Tab --&gt;
      &lt;ion-tab title="Friends" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/friends"&gt;
          &lt;ion-nav-view name="tab-friends"&gt;&lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
  
  &lt;/ion-tabs&gt;
  </code></pre>
  
  <p><strong>Tabs-Friends.html</strong></p>
  
  <pre><code>&lt;ion-view view-title="Friends"&gt;
      &lt;ion-nav-buttons side="primary"&gt;
          &lt;button class="button button-icon icon ion-ios-minus-outline" ng-click="openModal()"&gt;&lt;/button&gt;
      &lt;/ion-nav-buttons&gt;
      &lt;ion-content&gt;
  …
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p><strong>Modal-template.html</strong></p>
  
  <pre><code>&lt;ion-modal-view&gt;
      &lt;ion-header-bar class="bar-positive"&gt;
          &lt;h1 class="title"&gt;Ionic Modal&lt;/h1&gt;
          &lt;div class="buttons"&gt;
              &lt;button class="button button-clear" ng-click="closeModal()"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/ion-header-bar&gt;
  &lt;/ion-modal-view&gt;
  </code></pre>
  
  <p><strong><em>Controllers.js</em></strong></p>
  
  <pre><code>angular.module('starter.controllers', [])
  
  .controller('HomePageCtrl', function ($scope, $window) {
      $scope.openInBrowser = function (URL) {
            $window.open(URL, '_system')
      }
  })
  
  .controller('FriendsCtrl', function ($scope, $window, TodoList) {
      …
  
  // breakpoint verifies function called in debugger when the button is pressed. 
  // However, I don't know how to call the ModalController’s $scope.openModal from here?
  
  $scope.openModal= function () { 
          $scope.modal.show();// to display ionic modal use it 
  }
  
  })
  .controller('ModalController', function ($scope, $timeout, $state, $ionicModal) {
       //give same file name as your modal html file
       $ionicModal.fromTemplateUrl('modal-template.html', {
           scope: $scope
       }).then(function (modal) {
           $scope.modal = modal;
       });
  
      $scope.openModal= function () { 
          $scope.modal.show();// to display ionic modal use it 
      }
       $scope.modal.show();// to display ionic modal use it
       $scope.closeModal = function () {
           $scope.modal.hide();// to hide ionic modal use it
       }
   });
  </code></pre>
  
  <p>Thanks for any help you can give.</p>