title: AngularJS - Managing URL changes across multiple controllers / UI elements
body: <p>Building an Angular application, I'm a fan of using ng-controller and custom directives to structure the app, e.g.:</p>
  
  <pre><code>&lt;nav ng-controller="NavController"&gt;&lt;/nav&gt;
  &lt;date-picker&gt;&lt;/date-picker&gt;
  </code></pre>
  
  <p>I like these patterns because they're declarative, and really easy to follow - you know exactly where to look to find the supporting logic.</p>
  
  <p>On the other hand, using ng-view, or even the ui-router plugin (to my mind) abstracts away some of the functionality and makes it harder to read. </p>
  
  <p>However, my preferred pattern gives me a problem when it comes to responding to URL changes app-wide in a logical way. I would like each part of the UI to respond appropriately to URL changes, but I don't know where to put the code. I have assumed I have two options:</p>
  
  <ol>
  <li>Respond to $location changes individually in each controller or directive</li>
  <li>Encapsulate this in some other class or service that maintains responsibility for listening to URL changes </li>
  </ol>
  
  <p>I can't quite figure out how to do either.</p>
  
  <p>Option one gives me complete control, but I'm unable to take advantage of ng-route - parsing parameters, etc. I'd really have to roll my own when it comes to inspecting URL changes.</p>
  
  <p>With option two, I can't reference any of my controllers, because they've been declared already!</p>
  
  <p>More broadly, my concern is that not finding a solution to this right away suggests that I must be thinking about things incorrectly. Is this fundamentally wrong? </p>
  
  <p>EDIT: For the avoidance of doubt, I very much AM talking about an SPA, and more specifically, this is the sort of thing I'm trying to do:</p>
  
  <pre><code>&lt;nav ng-controller="NavController"&gt;&lt;!-- more HTML here --&gt;&lt;/nav&gt;
  &lt;div ng-controller="VideoController"&gt;&lt;!-- more HTML here --&gt;&lt;/div&gt;
  &lt;div ng-controller="CommentController" ng-show="Active"&gt;&lt;!-- more HTML here --&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now, suppose I navigate to: "/video/:key/" - I want the VideoController to pick up the video key, and do what it needs to do to load a video. I want the NavController to highlight which menu item is active, etc.</p>
  
  <p>If I navigate to "/video/:videokey/comment" - I want the VideoController to load a video, AND the NavController to highlight which is active, AND the CommentController to load comments / appear into video, etc.</p>
  
  <p>It's this idea I haven't got my head around - responding to a URL change in TWO controllers, each responsible for a separate part of the UI in a Single Page Application.</p>