angularjs form does not fill on redirect

how to auto fill an edit form on redirect in angularjs? following is the scenario: i have a list of products. when i click on edit product, 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. i was successful in redirecting to the edit form but am unable to fill the form with original data. Following is my code:

app.js

 angular.module('productapp', []).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/productapp', {templateUrl: 'partials/productList.html'}).
        when('/productapp/:productid', {templateUrl: 'partials/edit.html'}).
        otherwise({redirectTo: '/productapp'});
}]);

edit.html

<div ng-controller="productsCtrl">
        <form method="POST" ng-controller="productsCtrl">
        <label>Add New Product:</label>
            <input type="text" name="keywords" ng-model="rs.name" placeholder="enter name..." value="{{rs.name}}">
            <input type="text" name="desc" ng-model="rs.description" placeholder="enter description..." value="{{rs.description}}">
            <button type="submit" ng-click="save(rs.product_id)">Save</button>
</form>
</div>

products.js

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+"&id="+id;
        dt = dt+"&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 <pre></pre> element
        }).error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
    };

index.html

<html ng-app = "productapp">
<head>
<title>Search form with AngualrJS</title>
        <script src="../angular-1.0.1.min.js"></script>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script src="js/products.js"></script>
        <script src="js/app.js"></script>
</head>
<body>
    <div ng-view></div>
</body>
</html>

productslist.html

    <div ng-controller="productsCtrl">
        <form method='POST' ng-controller="productsCtrl">
...

    <td><a href='#/productapp/{{product.product_id}}' ng-click = "fetch(product.product_id)">edit</a></td>

how do i do that?

Create another controller for the edit page (EditCtrl). Remove the fetch() from the productslist.html snippet -- just have the link. Then, in your EditCtrl, execute the fetch functionality (i.e., don't put the functionality into a method in the EditCtrl).

Inject $routeParam into your EditCtrl to have access to productID:

function EditCtrl($scope, $routeParams) {
   alert($routeParams.productid);
   // ... code here to fetch ...