Modal window with Angular (UI-Router / Directive) <p>I have spent some time now looking into a generic way of controlling a modal window with <code>AngularJS</code> and none of the proposed options are anywhere near 'good' solution.</p> <h2>The Directive Solution</h2> <p>I found <a href="http://jsfiddle.net/alexsuch/RLQhh/">this</a> demo, however the downside of that is you have to manually manage and store the state of the modal and cross-scope update it:</p> <pre><code>scope.$parent[attrs.visible] = true; </code></pre> <p>Also if you had to add more functionality like actually adding an item with a popup that would involve even more ugly code on the parent page scope.</p> <h2>The UI-Router Solution</h2> <p><a href="https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state">This is the official guide on how to use modals with ui router.</a></p> <p>This however is using <strong>ui.bootstrap.modal</strong> </p> <p>My question is, is there any simple and elegant solution to what is quite frankly a very simple problem...</p> <p><strong>Something like this for example:</strong></p> <pre><code>.state('popup', { url: '/item/add/', views: { 'popupView': { templateUrl: "/myPopup.html", controller: "myPopupController" } }, type: 'modal' }) </code></pre> <p>And things like close, redirect, submit, all are handled in the <code>myPopupController</code>.</p> <p>I am not seeking an explanation of why the examples are above are as they are, or how I should be using them. I am simply looking if anyone has come up with a better solution.</p>