title: angularjs mobile ui multiple modals not working
body: <p>I am implementing 3 different modals in the same view, 
  but only the one that's placed last could be activated.. my code: </p>
  
  <pre><code>    &lt;div ui-content-for="modals"&gt; 
        &lt;div class="modal" ui-if="blockPersonModal" ui-state='blockPersonModal'&gt; 
              &lt;div class="modal-backdrop in"&gt;&lt;/div&gt; 
              &lt;div class="modal-dialog"&gt; 
                &lt;div class="modal-content"&gt; 
                      &lt;div class="modal-header"&gt; 
                        &lt;button class="close" 
                                        ui-turn-off="blockPersonModal"&gt;&amp;times;&lt;/button&gt; 
                        &lt;h4 class="modal-title"&gt;Block&lt;/h4&gt; 
                      &lt;/div&gt; 
                      &lt;div class="modal-body"&gt; 
                        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.&lt;/p&gt; 
                      &lt;/div&gt; 
                      &lt;div class="modal-footer"&gt; 
                        &lt;button ui-turn-off="blockPersonModal" class="btn btn-default"&gt;Close&lt;/button&gt; 
                        &lt;button ui-turn-off="blockPersonModal" class="btn btn-primary"&gt;Save changes&lt;/button&gt; 
                      &lt;/div&gt; 
                &lt;/div&gt; 
              &lt;/div&gt; 
        &lt;/div&gt; 
      &lt;/div&gt; 
      &lt;div ui-content-for="modals"&gt; 
        &lt;div class="modal" ui-if="RequestIdentificationModal" ui-state='RequestIdentificationModal'&gt; 
              &lt;div class="modal-backdrop in"&gt;&lt;/div&gt; 
              &lt;div class="modal-dialog"&gt; 
                &lt;div class="modal-content"&gt; 
                      &lt;div class="modal-header"&gt; 
                        &lt;button class="close" 
                                        ui-turn-off="RequestIdentificationModal"&gt;&amp;times;&lt;/button&gt; 
                        &lt;h4 class="modal-title"&gt;Request Identification&lt;/h4&gt; 
                      &lt;/div&gt; 
                      &lt;div class="modal-body"&gt; 
                        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.&lt;/p&gt; 
                      &lt;/div&gt; 
                      &lt;div class="modal-footer"&gt; 
                        &lt;button ui-turn-off="RequestIdentificationModal" class="btn btn-default"&gt;Close&lt;/button&gt; 
                        &lt;button ui-turn-off="RequestIdentificationModal" class="btn btn-primary"&gt;Save changes&lt;/button&gt; 
                      &lt;/div&gt; 
                &lt;/div&gt; 
              &lt;/div&gt; 
        &lt;/div&gt; 
      &lt;/div&gt; 
      &lt;div ui-content-for="modals"&gt; 
        &lt;div class="modal" ui-if="ReportModal" ui-state='ReportModal'&gt; 
              &lt;div class="modal-backdrop in"&gt;&lt;/div&gt; 
              &lt;div class="modal-dialog"&gt; 
                &lt;div class="modal-content"&gt; 
                      &lt;div class="modal-header"&gt; 
                        &lt;button class="close" 
                                        ui-turn-off="ReportModal"&gt;&amp;times;&lt;/button&gt; 
                        &lt;h4 class="modal-title"&gt;Report&lt;/h4&gt; 
                      &lt;/div&gt; 
                      &lt;div class="modal-body"&gt; 
                        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo illum nihil voluptatem earum optio repellendus, molestias illo facere, ea non. Possimus assumenda illo accusamus voluptatibus, vel corporis maxime quam.&lt;/p&gt; 
                      &lt;/div&gt; 
                      &lt;div class="modal-footer"&gt; 
                        &lt;button ui-turn-off="ReportModal" class="btn btn-default"&gt;Close&lt;/button&gt; 
                        &lt;button ui-turn-off="ReportModal" class="btn btn-primary"&gt;Save changes&lt;/button&gt; 
                      &lt;/div&gt; 
                &lt;/div&gt; 
              &lt;/div&gt; 
        &lt;/div&gt; 
      &lt;/div&gt; 
  </code></pre>
  
  <p>if I am changing the order of the modals in my code, still only the last one will show up.</p>
  
  <p>how can I define three different modals in the new angularjs mobile ui? 
  unfourtanatley, the docs lacks clear information about how to do such a thing.</p>
  
  <p>thanks, </p>
  
  <p>Yonatan.</p>