Input fields showing the same - html

Question

I have problem with input fields in AngularJS. Whatever I write in one, I getting exactly same text in another one (field_start = field_end). What am I doing wrong? Is it something wrong with ng-model?
template.html
<form name="editForm" role="form" novalidate ng-submit="vm.save()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
ng-click="vm.clear()">×</button>
<h4 class="modal-title" id="myPackLabel">Create offer</h4>
</div>
<div class="modal-body">
<jhi-alert-error></jhi-alert-error>
<div class="form-group">
<label class="control-label" for="field_start">Miejsce startowe</label>
<input type="text" class="form-control" name="field_start" id="field_start"
ng-model="vm.transitPointStart.city" placeholder="np. Warszawa"
/>
</div>
<div class="form-group">
<label class="control-label" for="field_end">Miejsce docelowe</label>
<input type="text" class="form-control" name="field_end" id="field_end"
ng-model="vm.transitPointEnd.city" placeholder="np. Wrocław"
/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()">
<span class="glyphicon glyphicon-ban-circle"></span> <span>Cancel</span>
</button>
<button type="submit" ng-disabled="editForm.$invalid || isSaving" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> <span>Save</span>
</button>
</div>
</form>
controller.js
(function() {
'use strict';
angular
.module('myApp')
.controller('AddOfferDialogController', AddOfferDialogController);
AddOfferDialogController.$inject = ['$scope', '$stateParams', '$uibModalInstance', 'entity', 'ShipmentOffer', 'TransitPoint', 'PackageSlot'];
function AddOfferDialogController ($scope, $stateParams, $uibModalInstance, entity, ShipmentOffer, TransitPoint) {
var vm = this;
vm.shipmentOffer = entity;
vm.transitPointStart = entity;
vm.transitPointEnd = entity;
vm.save = function () {
vm.shipmentOffer.date = new Date();
TransitPoint.save(vm.transitPointStart);
TransitPoint.save(vm.transitPointEnd);
ShipmentOffer.save(vm.shipmentOffer);
$uibModalInstance.close();
vm.isSaving = false;
}
vm.clear = function() {
$uibModalInstance.dismiss('cancel');
};
}
})();

Answer 1

You are using the same object in your two references:
vm.transitPointStart = entity;
vm.transitPointEnd = entity;
maybe you need to create a clone to have different objects in your references (it depends of your requirements):
vm.transitPointStart = Object.assign({}, entity);
vm.transitPointEnd = Object.assign({}, entity);