Angularjs add data to array without submit form button

Question

I have an array that is shown with ng-repeat , also have a form to add data to this array.
but I don't want to use button for submit this form, so I used ng-blur in each input and called a function that is adding data to my array, but there is a problem.
when I use tab button to go to next input, data is added, but I am typing in second input of an empty form again

you can see my sample here : link

HTML CODE

<form ng-submit="addJobRecord()" id="job_records" class="ui-state-default info_box">
  <a class="sortable-handler">
    <i class="fa fa-arrows"></i>
  </a>
  <h4>old form</h4>
  <div ng-repeat="x in job_records" class="info_box_body">
    <div>
      <div class="col-sm-6 pull-right">
        <label>name: </label>
        <input class="form-control" id="job_record_name" type="text" name="job_record_name" value="{{x.name}}" />
      </div>
      <div class="col-sm-6 pull-right">
        <label>title: </label>
        <input class="form-control" id="job_record_title" type="text" name="job_record_title" value="{{x.title}}" />
      </div>
    </div>
    <div>
      <div class="col-sm-6 pull-right">
        <label>group: </label>
        <input class="form-control" id="job_record_group" type="text" name="job_record_group" value="{{x.group}}" />
      </div>
      <div class="col-sm-6 pull-right">
        <label>situation: </label>
        <input class="form-control" id="job_record_situation" type="text" name="job_record_situation" value="{{x.situation}}" />
      </div>
    </div>
    <div class="clearfix"></div>
    <hr>
  </div>
  <div class="info_box_body" name="helpForm">
    <h4>empty form</h4>
    <div>
      <div class="col-sm-6 pull-right">
        <label>name: </label>
        <input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_name" ng-model="JobRecordform.newJobName" placeholder="name" />
      </div>
      <div class="col-sm-6 pull-right">
        <label>title: </label>
        <input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_title" ng-model="JobRecordform.newJobTitle" placeholder="title" />
      </div>
    </div>
    <div>
      <div class="col-sm-6 pull-right">
        <label>group: </label>
        <input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_group" ng-model="JobRecordform.newJobGroup" placeholder="group" />
      </div>
      <div class="col-sm-6 pull-right">
        <label>situation: </label>
        <input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_situation" ng-model="JobRecordform.newJobSit" placeholder="situation" />
      </div>
    </div>
  </div>
</form>

SCRIPT CODE

$scope.JobRecordform = {};
$scope.addJobRecord = function() {
    //here $scope.user will have all the 3 properties
    // alert(JSON.stringify($scope.form));
    console.log($scope.JobRecordform);

        $scope.job_records.push({
            name: $scope.JobRecordform.newJobName,
            title: $scope.JobRecordform.newJobTitle,
            group: $scope.JobRecordform.newJobGroup,
            situation: $scope.JobRecordform.newJobSit
        });
        $scope.JobRecordform = {};

};
$scope.job_records = [
    {
        name: "my job",
        title: "my job title",
        group: "my job group",
        situation: "my job situation"
    }
];

Answer 1

You just have to check if the $scope values are not null before pushing it to the array. I have updated your plunker. Please check