title: How do I pass an object data as a value (not as reference) using angularJS $broadcast
body: <p>I'm trying to pass some <code>data</code> and <code>action</code> within two controllers by using AngularJS $broadcast event. But I'd problems with passing the data as a value (not reference).</p>
  
  <p>What I've done so far is first I created a function that broadcast <code>sendCartPreview</code> event with an object of <code>shoppingCart</code> inside shopping-cart.controller.js</p>
  
  <pre><code>//function inside shopping-cart.controller.js
  function sendCartPreview() {
    var shoppingCart = $scope.shoppingCart;
    $rootScope.$broadcast('sendCartPreview', shoppingCart);
  }
  </code></pre>
  
  <p>Then I add a listener of the event on another controller which retrieve the shoppingCart data and pass the data value to <code>sendCartPreview</code> function inside the controller</p>
  
  <pre><code>//function inside chat.controller.js
  $scope.$on("sendCartPreview", function(event, message){
    sendCartPreview(message);
  })
  </code></pre>
  
  <p>Basically the sendCartPreview function received the object data and added it to an array of message.</p>
  
  <pre><code>function sendCartPreview(shopping_cart) {
    //some logic here and push the data to an array
    vm.arrayOfMessage.push(shopping_cart);
  }
  </code></pre>
  
  <p>The problem that I'm facing is whenever <code>$scope.shoppingCart</code> value changes, the value inside <code>vm.arrayOfMessage</code> also change according to the respective changes. What I want to achieve in the mean time is passing the data as a value (not by reference) so that everytime $scope.shoppingCart value changed, it will not affect the data inside vm.arrayOfMessage. How do I achieve that? Kindly need your help in this, any kind of help would be appreciated, thanks!</p>