better way to add new property to existing object in another function on click

Question

what is the best way to update add new property to existing object from another function via click event?

this is my existing method that already has object

function another() {
  $scope.baseProduct = {
    prop1: 'ABC',
    prop2: 'DEF',
    prop3: 'GHI',
    // need to add newProp: true through showEligibleOffer()
  }
}

i need to access another() in my showEligibleOffer() to add one more new property called 'newProp: true' if checkbox is checked, otherwise newProp: false

so what I've done is

<div ng-app="app" ng-controller="demo">
  <input type='checkbox' ng-click='showEligibleOffer($event)' ng-model='showOffer' />
  <p ng-if='showOffer'>
    hello
  </p>
</div>


$scope.showEligibleOffer = function(e) {
  $scope.showOffer = !$scope.showOffer;
  var evt = e.target.checked;

  if ($scope.showOffer) {
        $scope.baseProduct = {
          newProp: evt
        }
  }
  console.log('new prop', $scope.baseProduct);
}

when do console.log after check and uncheck, not able to read $scope.baseProduct completly but instead its only showing like this

"new prop", {
  newProp: true
}

here I need help for below on

1. better way to add new property to existing object
2. pass true/false to that newly added property based on check and uncheck without duplicating the existing original object

here my fiddle

Thanks for the help every one

Answer 1

You can use destructuring assignment, like:

$scope.baseProduct = {
   ...$scope.baseProduct,
   newProp: evt
}

Or an older way is to add directly the new property into your object like:

$scope.baseProduct.newProp = evt;

Or using Object.assign:

Object.assign($scope.baseProduct, { newProp: evt })

Answer 2

you are only getting the newProp in console because the function another is not called before the ng-click function triggers. so you $scope.baseProduct is not yet available.

Since $scope.baseProduct is not available it is undefined and you cannot spread it using ...

angular.module("app", [])

  .controller("demo", function($scope) {
    

    function another() {
      $scope.baseProduct = {
        prop1: 'ABC',
        prop2: 'DEF',
        prop3: 'GHI',
        // need to add newProp: true through showEligibleOffer()
      }
    }
    
    // some one need to call this function
    // unless it is called $scope.baseProduct doesnt exist
    another()
    
    $scope.showEligibleOffer = function(e) {
      console.log('what is hre', e.target.checked)

      console.log('new prop', $scope.baseProduct);
      $scope.showOffer = !$scope.showOffer;
      var evt = e.target.checked;
      if ($scope.showOffer) {
        $scope.baseProduct = {
          ...$scope.baseProduct,
          newProp: evt
        }
      }
      console.log('new prop', $scope.baseProduct);
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="demo">
  <input type='checkbox' ng-click='showEligibleOffer($event)' ng-model='showOffer' />
  <p ng-if='showOffer'>
    hello
  </p>
</div>