input value not changing in ng-repeat

Question

I am trying to upload image using multer. The uploading part is okay but I also want to pass the object name/id to the index.js as I want to update the imageURL value in my product model.

Here is the html ::

<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="product in products">
            <td>{{$index + 1}}</td>
            <td>{{product.name}}</td>
            <td>
                <form action="/pictures/upload" method="POST"     
                      enctype="multipart/form-data"  
                      style="display:inline;">

                    <input type="hidden" name="pName" ng-value="product.name">
                    <input id="fileSelector" type="file" style="display:none;" name="avatar">
                    <input id="btnSubmit" type="submit" style="display:none;">

                </form>
            </td>
        </tr>
    </tbody>
</table>

This form is inside a table. But when I check the value of req.body.pName , it gives the value of the first product in the table regardless of the row from which the picture is being uploaded.

Here's the index.js :

router.post('/pictures/upload', function (req, res, next) {
  uploading(req, res, function(err){
    if (err) {
      console.log("Error Occured!");
      return;
    }
      console.log("Saved Successfully !!!");
      console.log(req.body.pName);
  });
   res.status(204).end();
});

What is it that I am doing wrong? any help would be appreciated.

Please advise if you think it might be done in any other way(not so complicated hopefully!).