how to show a modal dialog box on a button click using mobile-angular-ui

Question

Mobile Angular UI Is getting popular which is nothing but bootstrap 3 and angularjs combination

I would like to create a modal dialog box on button click and close the dialog on close icon, how to do it?

Based on the docs it says

<div ui-content-for="modals">
    <div class="modal" ui-if="modal1" ui-state='modal1'>
      .....
    </div>
</div>

But how to call this dialog, I tried this

<button ui-turn-on="modal1" class="btn btn-primary">Show Model</button>

But it is not working as expected, I am getting Warning: Attempt to set uninitialized shared state: modal1 error

Answer 1

I think you have placed ui-content-for inside the ui-yield-to

Put it outside that div tag as follows

<div ui-yield-to="modals"></div>
<div ui-content-for="modals">
    <div class="modal" ui-if="modal1" ui-state="modal1">
       ....your model html code
    </div>
</div>

So that modals will remain as a place holder