title: AngularJS: Multiple views with routing without losing scope
body: <p>I'm trying to implement a classic list/details UI. When clicking an item in the list, I want to display an edit form for that item <em>while still displaying the list</em>. I'm trying to work around Angular's 1-view-per-page limitation and decided to do it by having all URLs routed to the same controller/view. (Perhaps this is the root of my problem and I'm open to alternatives.)</p>
  
  <p>Routing:</p>
  
  <pre><code>$routeProvider
      .when('/list', { templateUrl: '/Partials/Users.html', controller: UserController })
      .when('/edit/:UserId', { templateUrl: '/Partials/Users.html', controller: UserController })
      .otherwise({ redirectTo: '/list' });
  </code></pre>
  
  <p>The view (/Partials/Users.html):</p>
  
  <pre><code>&lt;!-- List of users --&gt;
  &lt;div ng-repeat="user in Users"&gt;
      &lt;a href="*/edit/{{ user.Id }}"&gt;Edit {{ user.Name }}&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- Edit form --&gt;
  &lt;div&gt;
      {{ SelectedUser.Name }}
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>function UserController($scope, $routeParams) {
      // the model for the list
      $scope.Users = GetUserListFromService();
  
      // the model for the edit form
      if ($routeParams.UserId != null)
          $scope.SelectedUser = GetUserFromService($routeParams.UserId);
  }
  </code></pre>
  
  <p>Problems:</p>
  
  <ol>
  <li>When clicking an edit link, the controller is reinstantiated with a new scope, so I have to re-init the Users list. (In a more complex example I could have input from the user stored bound to the model and this would also get lost.) I'd prefer to persist the scope from the previous route.</li>
  <li>I'd prefer to use a separate controller (or, as many other Angular developers have complained, the ability to have multiple displayed views!) but that leads to the same issue of losing scope.</li>
  </ol>