title: How to catch the invalid URL?
body: <p>I am building a simple HTML site using Angular JS ui-router.</p>
  
  <p>I have built a custom 404 page ('www.mysite/#/error/404'), to which the user is redirected if the user types a url like 'www.mysite/#/invalidUrl'. This functionality was achieved by the following code snippet:</p>
  
  <pre><code>$urlRouterProvider
              .when('', '/')
              .when('/home', '/')
              .otherwise('/error/404');
  </code></pre>
  
  <p>And the following state snippet:</p>
  
  <pre><code>$stateProvider.state('404', {
              parent: 'app',
              url: '^/error/404',
              views: {
                  'errorContent@main': {
                      controller: 'error404Controller',
                      templateUrl: 'js/general/templates/error404.html'
                  }
              }
          });
  </code></pre>
  
  <p>I am trying to capture the invalid URL requested by the user to be displayed to the user like below.</p>
  
  The URL you requested cannot be found <br />
  Request: www.mysite.com/#/invalidUrl</p>
  
  <p>I have tried listening to '$stateNotFound' event, which only seems to be firing when a specific invalid state is requested. I've also tried to listening to events '$stateChangeStart', '$locationChangeStart', and '$locationChangeSuccess' but couldn't find a way to achieve this functionality.</p>
  
  <p>Is this possible? Please, share your thoughts - thank you</p>