title: Calling controller from function and passing it a URL-encoded parameter
body: <p>I am developing a CRUD interface for a Rest service. Currently, I could manage to get the list of teams in the system. </p>
  
  <p>What I like to do is to show details for the  when I click the show link. Currently clicking on the link calls a function (not yet implemented) that is supposed to load the details part into the <code>ng-view</code>. The function should pass a parameter to the <code>ViewTeamController</code> which will subsequently invoke the Rest service and give the result to a <code>$scope</code> variable.</p>
  
  <p>I am not sure about how to call the <code>ViewTeamController</code> possibly using a URL encoded parameter from the <code>showTeam()</code> function. And I would also like to know how to read the URL-encoded parameter inside the <code>ViewTeamController</code>.</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-route.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          var teamApp = angular.module("teamApp", ['ngRoute']);
  
          teamApp.controller('teamController', function($scope, $http) {
  
              $http
                      .get('/teams')
                      .success(function(response) {
                          $scope.teams = response;
                      }
                      );
          });
  
          mainApp.config(['$routeProvider', function($routeProvider) {
              $routeProvider.
  
              when('/addTeam', {
                  templateUrl: 'addTeam.htm',
                  controller: 'AddTeamController'
              }).
  
              when('/viewTeam', {
                  templateUrl: 'viewTeam.htm',
                  controller: 'ViewTeamController'
              }).
  
              otherwise({
                  redirectTo: '/addTeam'
              });
          }]);
  
          mainApp.controller('AddTeamController', function($scope) {
  
          });
  
          mainApp.controller('ViewTeamController', function($scope) {
  
          });
  
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div ng-app = "teamApp" ng-controller="teamController"&gt;
  
      &lt;a ng-click="newTeam()"&gt;new&lt;/a&gt;
  
      &lt;div ng-repeat="team in teams" &gt;
          Name: {{team.name}}
          &lt;br /&gt;
          Description: {{team.description}}
          &lt;br /&gt;
          &lt;a ng-click="showTeam(team.id)"&gt;show&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div ng-view&gt;&lt;/div&gt;
  
      &lt;script type = "text/ng-template" id = "addTeam.htm"&gt;
          &lt;h2&gt; Add Team &lt;/h2&gt;
          To be implemented later.
      &lt;/script&gt;
  
      &lt;script type = "text/ng-template" id = "viewTeam.htm"&gt;
          Name: {{team.name}}
          Description: {{team.description}}
      &lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>