How can I reset data to default in Bootstrap modal using AngularJS?

Question

How can I reset data to default in Bootstrap modal using AngularJS? This is how am I trying to do:

$scope.initial = [
    {
      name: 'nam_fruit',
      price: 0
    }];

    $scope.reset = function(){
    $scope.dataFruit = $scope.initial;  
  } 

But it doesn't work. Fields still have old data. Check my fiddle: http://jsfiddle.net/q69yckt1/

Answer 1

You are assigning an array as initial model. just remove [] and that should work:

$scope.initial =
{
  name: 'nam_fruit',
  price: 0
};

$scope.reset = function(){
  $scope.dataFruit = angular.copy($scope.initial);  
} 

as devqon mentioned in his comment you should also create a copy of $scope.initial as its just a reference copy if you just use $scope.dataFruit = $scope.initial; .

This is the working fiddle.

Answer 2

var vm = this;
//(like a private field)
var initial_is_editable = true;
vm.initial = [{
  name: 'nam_fruit',
  price: 0
},{
  name: 'nam_fruit',
  price: 0
}];

function reset(reset_modal_index){
  if(initial_is_editable){
    vm.initial[reset_modal_index].name = "default_name"; 
    vm.initial[reset_modal_index].price= "default_price"; 
  }
  vm.dataFruit[reset_modal_index] = vm.initial[reset_modal_index];
} 

If I understand correctly: We have set of dataFruit modals and we are reseting data of chosen one to initial values.