title: Modal dialog using ui-router from any parent, how to correctly specify state?
body: <p>I am trying to open a modal dialog using Angular's ui-router as explained <a href="https://stackoverflow.com/questions/24713242/using-ui-router-with-bootstrap-ui-modal">here</a>.</p>
  
  <p>The goal is for the dialog to be accessible anywhere, a url is not necessarily needed but it would be nice if I could link to a page with the dialog open.</p>
  
  <p>Here is the broken sample:</p>
  
  <p><a href="http://plnkr.co/edit/BLkYME98e3ciK9PQjTh5?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/BLkYME98e3ciK9PQjTh5?p=preview</a></p>
  
  <p>clicking on "menu" should open the dialog from either page.</p>
  
  <p>The routing logic: </p>
  
  <pre><code>app.config(function($stateProvider,$locationProvider, $urlRouterProvider, modalStateProvider) {
    $urlRouterProvider.otherwise("/");
    $locationProvider.html5Mode(true);
  
    $stateProvider
      .state("app", {
        url: "",
        abstarct: true,
        views: {
          "" : {
            templateUrl: "main.html",
          },
          "header@app": {
            templateUrl: "header.html"
          },
          "footer@app":{
            templateUrl: "footer.html"
          }
        }
      })
  
      .state("app.home", {
        url: "/",
        templateUrl: "home.html",
      })
      .state("app.content", {
        url: "/content",
        templateUrl: "content1.html",
      });
  
  
    modalStateProvider.state("app.home.menu", {
      template: "I am a Dialog!",
      controller: function ($scope) {
        $scope.dismiss = function () {
          $scope.$dismiss();
        };
      }
    });
  });
  </code></pre>
  
  <p>It should not be a child of "app.home" since I want it to be accessible from anywhere. How can I achieve this?</p>