title: How to create a data transfer object in angular and send it to the back end?
body: <p>I am totally new to angularJs(I am actually a pure backend dev :( ). 
  I watched a couple of youtube videos and I am trying to create a very simple ui that uses angular to talk to my Spring mvc app in the back end.</p>
  
  <p>I am facing a problem, I have no clue how to send a javascript object to my backend using $http.post. Can somebody help me? 
  Actually, is not just that, also im a bit crap at html, and I am not sure how to 
  trigger the angularjs when clicking on of the div.</p>
  
  <p>I show you what I have so far in what regards angular...</p>
  
  <p><strong>This is my view</strong></p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt;TicTacToe&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="resources/css/design.css"/&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"&gt;&lt;/script&gt;
      &lt;script src="resources/javascript/tictactoe.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="displayPageController"&gt;
  &lt;div id="player-1"&gt;PLAYER 1&lt;br/&gt;
      {{Board.player1}}
  &lt;/div&gt;
  &lt;div id="game"&gt;
  
      &lt;div id="top-left" ng-click='playPage()'&gt;{{Board.topleft}}&lt;/div&gt;
      &lt;div id="top" ng-click='playPage()'&gt;{{Board.top}}&lt;/div&gt;
      &lt;div id="top-right" ng-click='playPage()'&gt;{{Board.topright}}&lt;/div&gt;
      &lt;div id="left" ng-click='playPage()'&gt;{{Board.left}}&lt;/div&gt;
      &lt;div id="middle" ng-click='playPage()'&gt;{{Board.middle}}&lt;/div&gt;
      &lt;div id="right" ng-click='playPage()'&gt;{{Board.right}}&lt;/div&gt;
      &lt;div id="bottom-left" ng-click='playPage()'&gt;{{Board.bottomleft}}&lt;/div&gt;
      &lt;div id="bottom" ng-click='playPage()'&gt;{{Board.bottom}}&lt;/div&gt;
      &lt;div id="bottom-right" ng-click='playPage()'&gt;{{Board.bottomright}}&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="player-2"&gt;PLAYER 2&lt;br/&gt;
      {{Board.player2}}
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>This is my javascript</strong></p>
  
  <pre><code>   var myApp = angular.module('myApp',[]);
  
  var gameBoardDto = {
  player1:"0",
  player2:"0",
  topleft:".",
  top:".",
  topright:".",
  left:".",
  middle:".",
  right:".",
  bottomleft:".",
  bottom:".",
  bottomright:"."
  };
  
  myApp.controller('displayPageController', function($scope,$http) {
  
    $scope.Board = {};
  
    $scope.Board.player1 = gameBoardDto.player1;
    $scope.Board.player2 = gameBoardDto.player2;
    $scope.Board.topleft = gameBoardDto.topleft;
    $scope.Board.top = gameBoardDto.top;
    $scope.Board.topright = gameBoardDto.topright;
    $scope.Board.left = gameBoardDto.left;
    $scope.Board.middle = gameBoardDto.middle;
    $scope.Board.right = gameBoardDto.right;
    $scope.Board.bottomleft = gameBoardDto.bottomleft;
    $scope.Board.bottom = gameBoardDto.bottom;
    $scope.Board.bottomright = gameBoardDto.bottomright;
  
    $scope.playPage = function() {
        $http({
              method: 'POST',
              url: 'http://localhost:8080/play',
              data: $scope.Board,
              headers: {'Content-Type': 'application/json;charset=UTF-8'}
          }).success(function(gameBoardDto) {
                $scope.gameBoardDto = gameBoardDto;
            }.bind(this));
    };
  });
  </code></pre>
  
  <p><strong>update</strong>
  I think I managed to trigger thefunction using the above code, now I am getting an error 400. I think now I need to have a look at the server side.</p>
  
  <p><a href="https://i.stack.imgur.com/0DyK2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0DyK2.png" alt="enter image description here"></a></p>