title: Conditionally open a modal in AngularJS
body: <p>I want to implement a functionality similar to what Facebook does with its photos. Here's the use case:</p>
  
  <ol>
  <li>User goes to <code>/</code>—a page with a list of links</li>
  <li>He clicks on a link</li>
  <li>A modal window appears and the URL changes into <code>/people/:id</code>—where <code>:id</code> depends on what I clicked on.</li>
  <li>When the user closes the modal the URL goes back to <code>/</code></li>
  <li>If the user goes directly to <code>/people/:id</code> he can see a full page and not a modal</li>
  </ol>
  
  <p>I made an example AngularJS application that does that <a href="https://github.com/Gpx/conditional-modal" rel="nofollow">https://github.com/Gpx/conditional-modal</a>. The problem is that is not testable. In particular see this code:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Listen to location changes
  $scope.$on('$locationChangeStart', function (evt, next, current) {
    var match;
    // Is the new page /people/:id ?
    if (match = next.match(/\/people\/(\d)+$/i)) {
      evt.preventDefault(); // Don't change view
  
      // Show a modal
      var dialogScope = $scope.$new();
      dialogScope.person = $scope.people[match[1]];
      ngDialog.open({
        template: 'views/person.html',
        controller: 'PersonCtrl',
        scope: dialogScope
      });
  
      // Here comes the tricky part
  
      // When the modal gets closed we go back    
      dialogScope.$on('ngDialog.closed', function (e, $dialog) {
        window.history.pushState('', '', '/#/');
      });
      // We need to use setTimeout or we'll run into a Error: 10 $digest() iterations reached. Aborting!
      setTimeout(function() {
        window.history.pushState('', '', '/#/people/' + match[1] + '?skip');
      }, 5000);
    }
  });
  </code></pre>
  
  <p>Any idea on what is the best approach to achieve this functionality?</p>