title: AngularJS form does not fill on Redirect
body: <p>How to auto-fill an edit form on a redirect in AngularJS? following is the scenario:</p>
  
  <p>I have a list of products. when I click on <code>edit product</code>, I should be redirected to the edit form(by using AngularJS routing), and the edit form containing 2 fields- name and description, should get automatically filled by the data to be edited. </p>
  
  <p>I was successful in redirecting to the edit form but am unable to fill the form with original data. Following is my code:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code> angular.module('productapp', []).
      config(['$routeProvider', function($routeProvider) {
      $routeProvider.
          when('/productapp', {templateUrl: 'partials/productList.html'}).
          when('/productapp/:productid', {templateUrl: 'partials/edit.html'}).
          otherwise({redirectTo: '/productapp'});
  }]);
  </code></pre>
  
  <p><strong>edit.html</strong></p>
  
  <pre><code>&lt;div ng-controller="productsCtrl"&gt;
          &lt;form method="POST" ng-controller="productsCtrl"&gt;
          &lt;label&gt;Add New Product:&lt;/label&gt;
              &lt;input type="text" name="keywords" ng-model="rs.name" placeholder="enter name..." value="{{rs.name}}"&gt;
              &lt;input type="text" name="desc" ng-model="rs.description" placeholder="enter description..." value="{{rs.description}}"&gt;
              &lt;button type="submit" ng-click="save(rs.product_id)"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>products.js</strong></p>
  
  <pre><code>function productsCtrl($scope, $http, $element) {
          //~ $scope.url = 'php/search.php'; // The url of our search
          // The function that will be executed on button click (ng-click="search()")
          $http.get('php/products.php').success(function(data){
              alert("hi");
              $scope.products = data;
          });
  $scope.fetch = function(id) {
          var elem = angular.element($element);
          var dt = $(elem).serialize();
          //alert(id);
          dt = dt+"&amp;id="+id;
          dt = dt+"&amp;action=fetch";
          console.log($(elem).serialize());
          $http({
              method: 'POST',
              url: 'php/products.php',
              data: dt,
              headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          }).success(function(data, status) {
              //~ $scope.status = status;
              //~ $scope.data = data;
              $scope.rs = data;
              console.log(data); // Show result from server in our &lt;pre&gt;&lt;/pre&gt; element
          }).error(function(data, status) {
              $scope.data = data || "Request failed";
              $scope.status = status;
          });
      };
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html ng-app = "productapp"&gt;
  &lt;head&gt;
  &lt;title&gt;Search form with AngualrJS&lt;/title&gt;
          &lt;script src="../angular-1.0.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/products.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p><strong>productslist.html</strong></p>
  
  <pre><code>    &lt;div ng-controller="productsCtrl"&gt;
          &lt;form method='POST' ng-controller="productsCtrl"&gt;
  ...
  
      &lt;td&gt;&lt;a href='#/productapp/{{product.product_id}}' ng-click = "fetch(product.product_id)"&gt;edit&lt;/a&gt;&lt;/td&gt;
  </code></pre>
  
  <p>How do I do that?</p>