title: Use a custom modal in ui router
body: <p>I would like to have my own modal in root HTML, which can be called anytime from the child state.</p>
  
  <p>For example, <code>index.html</code> is</p>
  
  <pre><code>&lt;div ui-view="contacts"&gt;&lt;/div&gt;  &lt;--! load contact.html --&gt;
  &lt;div ui-view="modal"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>then, <code>contacts.html</code> </p>
  
  <pre><code>&lt;div&gt; contact detail &lt;/div&gt;
  &lt;button ng-click="openModal('confirmModal')"&gt; delete it ? &lt;/button&gt;
  </code></pre>
  
  <p>When clicking the button, I would like, for example, to prompt a modal and confirm the action. I'd like to make use of the template system provided by <code>ui-router</code>, so I can separate the different view for the different modal (probably there is different state for each).</p>
  
  <p>The routing table I designed is as follows,</p>
  
  <pre><code>app.config(['$stateProvider',function(s) {
    s.state('index',{
       views : {
         contacts : {
            templateUrl : "views/contacts.html"
         }
       }
    ).state('openConfirmModal',{
       views : {
         modal : {
            templateUrl : "views/modal.confirm.html"
         }
       }
    }).state('openOtherModal',{
       //... loading other modal
    })
  }
  </code></pre>
  
  <p>When going from state <code>index</code> to <code>openConfirmModal</code>, the <code>modal.confirm.html</code> should be loaded into <code>modal</code> view without destroying and refreshing the displaying <code>index</code> view, so that it will behave like a "modal".</p>
  
  <p>But what <code>ui-router</code> actually does is to close or refresh the <code>index</code> view, when the state is changed. </p>
  
  <p>I know some ideas about add the event listener for <code>$stateChangeStart</code>, so that it will not refreshing the <code>index</code> view when the event happen. But I don't know how to load the modal into the view within the event handler.</p>