$pristine is set to false on Form load

by Suman Kumar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<form ng-app='myApp' ng-controller='myCtrl' role="form" name="myForm" ng-submit="submitFormData()">
  <div class="form-group">
    <div>
      <label>Code</label>
    </div>
    <div>
      <input type="text" class="form-control" name="Code" ng-model="formData.code">
    </div>
  </div>

  <div class="form-group">
    <div>
      <label>Description</label>
    </div>
    <div>
      <input class="form-control" type="text" name="Description" ng-model="formData.description">
    </div>
  </div>

  <div class="form-group">
    <div>
      <label>Start Date</label>
    </div>
    <div>
      <input class="form-control" type="text" name="StartDate" my-date-picker ng-model="formData.startDate">
    </div>
  </div>

  <div>
    <button type="submit" class="btn btn-primary">Save</button>
    <button type="reset" class="btn btn-default">Cancel</button>
  </div>

  <br> Test Data :{{test}}
  <br>
  <br> Complete Form Details :{{myForm}}
  <br>
  <br>
  <br> First Name : {{myForm.Code}}
</form>

JavaScript

angular.module('myApp', [])
  .directive('myDatePicker', function($compile) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelCtrl) {
        $(element[0]).datepicker({
          autoclose: true,
          format: "dd/mm/yyyy"
        });

        $(element[0]).datepicker().on("change", function(e) {
          scope.$apply(function() {
            ngModelCtrl.$setViewValue(element.val());
          });
        });
      }
    }
  })
  .controller('myCtrl', function($scope) {
    $scope.test = "Test data";
  })