Error in using angularjs data in form action link in spring mvc web app project - angularjs

Question

I m using angularjs to retrieve my data in my spring web app project. it is able to retrieve and display the data in all places i have passed it using {{ }} but in my form-action link it is not able to read the value passed . what is wrong with the syntax?
<div class="container text-center" ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="product in Data" >
<div class=col-lg-5>
<center>
<img src="<c:url value='/resource/image/{{product.name}}.jpg'/>" />
</center>
</div>
<div class=col-lg-7>
<table class="table table-striped">
<tr>
<h1>{{product.name}}</h1>
</tr>
<tr>
<th>Description</th>
<td>{{product.description}}</td>
</tr>
<tr>
<th>Category</th>
<td>{{product.category}}</td>
</tr>
<tr>
<th>Price</th>
<td>Rs.{{product.price}}</td>
</tr>
^
till here it displays the data using angular js
</table>
</div>
<form:form method="POST" modelAttribute="cart" action="${pageContext.request.contextPath}/user/addtocart?productId={{product.id}}">
^
here it doesnt read the data passed using angularjs
<sec:authorize access="hasRole('ROLE_USER')">
<input type="submit" class="btn btn-info btn-lg" value="Add to Cart" />
</sec:authorize>
</form:form>

Answer 1

Change your HTML to below way,because your ng-controller <div> tag ended before the form as the angular scope is restricted to that </div> tag itself your {{}} expression in action is not evaluated.
<div class="container text-center" ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="product in Data">
<div class=col-lg-5>
<center>
<img src="<c:url value='/resource/image/{{product.name}}.jpg'/>" />
</center>
</div>
<div class=col-lg-7>
<table class="table table-striped">
<tr>
<h1>{{product.name}}</h1>
</tr>
<tr>
<th>Description</th>
<td>{{product.description}}</td>
</tr>
<tr>
<th>Category</th>
<td>{{product.category}}</td>
</tr>
<tr>
<th>Price</th>
<td>Rs.{{product.price}}</td>
</tr>
</table>
<form:form method="POST" modelAttribute="cart" action="${pageContext.request.contextPath}/user/addtocart?productId={{product.id}}">
<sec:authorize access="hasRole('ROLE_USER')">
<input type="submit" class="btn btn-info btn-lg" value="Add to Cart" />
</sec:authorize>
</form:form>
</div>
</div>
</div>