title: Passing id into url for individual view in angular.js
body: <p>I'm trying to build my first angular application (using some dummy data). I have a partial which renders a list of users, and a partial to view details about an individual user. The routing to the individual user is based on id. My problem is that when I click on an individual user, that users id is not passed into the url. Can anyone tell me how to do this?</p>
  
  <p>app.js</p>
  
  <pre><code>'use strict';
  
  
  // Declare app level module which depends on filters, and services
  angular.module('App', [
    'ngRoute',
    'App.filters',
    'App.services',
    'App.directives',
    'App.controllers'
  ]).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UsersCtrl'}).
    when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}).
    when('/users/:userId', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}).
    when('/users/:userId/edit', {templateUrl: 'partials/users/user-edit.html', controller: 'UserEditCtrl'}).
  
    otherwise({redirectTo: '/home'});
  }]);
  </code></pre>
  
  <p>controllers.js:</p>
  
  <pre><code>'use strict';
  
  /* Controllers */
  
  angular.module('App.controllers', []).
    controller('UsersCtrl', [function() {
  
    }])
    .controller('UserDetailCtrl', [function() {
  
    }])
    .controller('UserEditCtrl', [function() {
  
    }])
    .controller('UserNewCtrl', [function() {
  
    }]);
  </code></pre>
  
  <p>user-list.html</p>
  
  <pre><code>&lt;body ng-controller="UserListCtrl"&gt;
  
    &lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid"&gt;
        &lt;div class="span2"&gt;
          &lt;!--Sidebar content--&gt;
  
        &lt;/div&gt;
        &lt;div class="span10"&gt;
          &lt;!--Body content--&gt;
  
          &lt;ul class="list-group"&gt;
            &lt;h4&gt;Users&lt;/h4&gt;
  
            &lt;div ng-init="users = [
  {id: 1, firstName:'John', lastName: 'Doe', email: 'johnd@gmail.com'},
  {id: 3, firstName:'Jane', lastName: 'Doe', email: 'janed@gmail.com'},
  {id: 4, firstName:'Donald', lastName: 'Duck', email: 'dd@disney.com'},
  {id: 2, firstName:'Mary', lastName: 'Smith', email: 'ms@smiths.com'}
  ]"&gt;
  
            &lt;li class="list-group-item" ng-repeat="user in users"&gt;
              &lt;a href="#/users/:userId"&gt;{{user.firstName}} {{user.lastName}}&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>