Witajcie. Na zajęcia laboratoryjne mam zadanie zasynchronizować strone JSP przy pomocy Angulara. Mam dwa widoki które umieszczone są w tapach w stronie MainPage.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="lib/angular.min.js"></script>
<script src="js/page.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="TabsApp">
    <div id="tabs" ng-controller="TabsCtrl">
         <ul>
            <li ng-repeat="tab in tabs" 
                ng-class="{active:isActiveTab(tab.url)}" 
                ng-click="onClickTab(tab)"
                ng-controller="tableReciptCtr">{{tab.title}}
                </li>
        </ul>
        <div id="mainView">
            <div ng-include="currentTab"></div>
        </div>
    </div>
    
</div>
</body>
</html>

Widok wszystkich przepisów

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="lib/angular.min.js"></script>
<script src="js/page.js"></script>
</head>
<body>

	<div style="width: 1200px; margin-left: auto; margin-right: auto;">
		<div data-ng-app="TabsApp">
			<div ng-controller="tableReciptCtr">
					<div ng-init="recipts = getDataFromServer()">
				<form action="/CookBook/Filtr" method="post">
					<table cellpadding="10">
						<tr>
							<th><a href="sort?sort=ID">ID</a></th>
							<th><a href="sort?sort=TITLE">TITLE</a></th>
							<th><a href="sort?sort=CONTENT">CONTENT</a></th>
							<th><a href="sort?sort=TIME_PREPARE">TIME</a></th>
							<th><a href="sort?sort=CAL">CAL</a></th>
							<th></th>
						</tr>

						<tr>
							<td><input type="text" name="id"></td>
							<td><input type="text" name="title"></td>
							<td><input type="text" name="content"></td>
							<td><input type="text" name="time"></td>
							<td><input type="text" name="cal"></td>
							<td><input type="submit" value="Submit"></td>
						</tr>

						<tr ng-repeat="recipt in recipts">

							<td>{{recipt.id}}</td>
							<td>{{recipt.title}}</td>
							<td>{{recipt.content}}</td>
							<td>{{recipt.time}}</td>
							<td>{{recipt.cal}}</td>

							<td><a ng-click="editRecipt(recipt.id)">Edit</a> <a
								ng-click="">Delete</a></td>
						</tr>


						<tr>
							<td><a ng-click="">Add New</a></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>

</body>
</html>

oraz Widok pojedynczego aby edytowac

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="lib/angular.min.js"></script>
<script src="js/page.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="TabsApp">
    <div id="tabs" ng-controller="TabsCtrl">
         <ul>
            <li ng-repeat="tab in tabs" 
                ng-class="{active:isActiveTab(tab.url)}" 
                ng-click="onClickTab(tab)"
                ng-controller="tableReciptCtr">{{tab.title}}
                </li>
        </ul>
        <div id="mainView">
            <div ng-include="currentTab"></div>
        </div>
    </div>
    
</div>
</body>
</html>

Potrzebuje wykonać następujący flow. Bo naciśnieniciu przycisku edit w tabelce wyswietlającej wszystkie przepisy, przechodze do wikou Edit gdzie w formularzu dostaje juz wypełniony model dlatego przepisu.

@WebServlet(name = "edit", urlPatterns = { "/edit" })
public class EditRecipt extends HttpServlet {

	protected void processRequest(HttpServletRequest request, HttpServletResponse response) {
		String idTemp = request.getParameter("id");
		if(idTemp!=null){
			int id = Integer.parseInt(idTemp);
			Recipt newRecipt=DataAccess.getReciptById(id).get(0);
	        String json = new Gson().toJson(newRecipt);
	        response.setContentType("application/json");
	        try {
				response.getWriter().write(json);
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
	}

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		processRequest(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		processRequest(request, response);
	}

Próbowałam komunikacji za pomocą metody POST i GET ale nie wykonuje mi sie ona poproawnie. Ma ktoś jakiś pomysł jak należy to zrobić?

.controller("tableReciptCtr", function($scope, $http) {

	$scope.getDataFromServer = function() {
		$http({
			method : 'GET',
			url : 'AllRecipt'
		}).success(function(data, status, headers, config) {
			$scope.recipts = data;
		}).error(function(data, status, headers, config) {
			// called asynchronously if an error occurs
			// or server returns response with an error status.
		})};
	
	$scope.editRecipt = function(curdata) {
		$http({
			method : 'GET',
			url : 'edit?id='+curdata,
		}).success(function(data, status, headers, config) {
			$scope.getRecipt = data;
		}).error(function(data, status, headers, config) {
			// called asynchronously if an error occurs
			// or server returns response with an error status.
		})};

Ma ktoś jaki pomysł jak zrobić taka komunikacje pomiedzy jsp gdzie elementy umieszczone są w tapach?