AngularJs: Input value changes in display too using ng-model. I have tried ng-value and ng-bind too - angularjs

Question

<div class="form-group">
Name <input type="text" class="form-control" placeholder="item" ng-model="shoppingItem.itemName" required>
</div>
<div class="form-group">
Image URL <input type="url" class="form-control" placeholder="item" ng-model="shoppingItem.imgUrl" required>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" ng-click="save()" >Success</button>
</div>
app.controller('recipebookController',function($scope,$routeParams,RecipeService,$location){
$scope.shoppingItems =RecipeService.shoppingItems;
$scope.rp="Route parameter value"+RecipeService.shoppingItems[0].itemName;
$scope.save = function(){
RecipeService.save($scope.shoppingItem);
$location.path("/");
}
});
<div class="col-xs-12">
<ul class="list-group">
<li ng-repeat="item in shoppingItems"class="list-group-item text-center clearfix">
<span style="font-weight:bold">{{item.itemName}}</span>
<img ng-src="{{ item.imgUrl }}" width="40" height="40"/>`
</li>
</ul>
</div>
When I enter save, the new data is saving row wise perfectly and displaying but when I re-enter new value into the input. The previously save value get changes as I type.

Answer 1

The issue that you're facing is that when you call RecipeService.save($scope.shoppingItem);, the RecipeService is saving the reference to your scope variable.
So, instead of assigning the variable directly, I might try doing something like this:
RecipeService.save(angular.copy($scope.shoppingItem));
This will create a new copy of the object referenced by $scope.shoppingItem and will allow you to edit one of those objects without affecting the other.