Passing id into url for individual view in angular.js


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?


'use strict';

// Declare app level module which depends on filters, and services
angular.module('App', [
config(['$routeProvider', function($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'});


'use strict';

/* Controllers */

angular.module('App.controllers', []).
  controller('UsersCtrl', [function() {

  .controller('UserDetailCtrl', [function() {

  .controller('UserEditCtrl', [function() {

  .controller('UserNewCtrl', [function() {



<body ng-controller="UserListCtrl">

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span2">
        <!--Sidebar content-->

      <div class="span10">
        <!--Body content-->

        <ul class="list-group">

          <div ng-init="users = [
{id: 1, firstName:'John', lastName: 'Doe', email: ''},
{id: 3, firstName:'Jane', lastName: 'Doe', email: ''},
{id: 4, firstName:'Donald', lastName: 'Duck', email: ''},
{id: 2, firstName:'Mary', lastName: 'Smith', email: ''}

          <li class="list-group-item" ng-repeat="user in users">
            <a href="#/users/:userId">{{user.firstName}} {{user.lastName}}</a>


Problem courtesy of: bookthief


Inject $routeParams. This service allows you to get any parameter passed in the controller.

.controller('UserDetailCtrl', function($scope, $http, $routeParams) {
        var userId = $routeParams.userId;
        // your code here.


.controller('UserDetailCtrl', ['$scope', '$http', '$routeParams', function(scope, http, routeParams) {
        var userId = routeParams.userId;
        // your code here.


Solution courtesy of: cardeol


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.