title: How to bind Datepicker with angular ng-model
body: <p>I have a form with a few fields in HTML. Below is the related lines for the date fields where I use a datepicker.</p>
  
  <pre><code>&lt;input tabindex="3" class="date-picker" name = "startDate" type="text" id="startDate" ng-model = "startDate" ng-required="true"&gt;
  &lt;input tabindex="4" class="date-picker" name = "endDate" type="text" id="endDate" ng-model = "endDate" ng-required="true"&gt;
  </code></pre>
  
  <p>Here is the javascript for the datepicker.</p>
  
  <pre><code>&lt;script&gt;
      $(function() {
          $( "#startDate" ).datepicker({
              dateFormat: "dd-mm-yy"
          });
      });
  
      $(function() {
          $( "#endDate" ).datepicker({
              dateFormat: "dd-mm-yy"
          });
      });
  </code></pre>
  
  <p></p>
  
  <p>and Here is the Angular JS controller for the form. I'm sending a REST request to my backend and taking the response. </p>
  
  <pre><code>tournamentAddApp.controller('tournamentAddController', function ($scope, $window, $http) {
  
  $scope.controller = "tournamentAddController";    
  
  $scope.add = function () {
      var data = {
                  name: $scope.tournamentName,
                  location: $scope.location,
                  status: $scope.status,
                  description: $scope.description,
                  startDate: $scope.startDate,
                  endDate: $scope.endDate             
  
              };
      var url = "http://localhost:8080/crickmaster-app-userapp/controller/tournament/create";
  
      $http.post(url, data).success(function (data, status, headers, config) {
      //console.log(data);
      $window.location.href = 'index.html';
      }).error(function (err) {
          console.log(err);
      });
  };
  });
  </code></pre>
  
  <p>However when I submit the form, JSON header doesn't contain the <strong>date</strong> fields. It contain all other fields but not the date fields. In other words when I submit the form, non of the data goes to the database. After doing some research I feel like this has to do with the binding of the datepicker. I've referred the below post and tried suggested solutions but it doesn't contain a clear answer so therefore I might be doing something wrong. </p>
  
  <p><strong><a href="https://stackoverflow.com/questions/19316937/how-to-bind-bootstrap-datepicker-element-with-angularjs-ng-model">how to bind Bootstrap-datepicker element with angularjs ng-model?</a></strong></p>
  
  <p>Any help is much appreciated. Thanks.   </p>