javascript - Object passed through ng-click function loses reference -

when passing object ng-click function, object seems lose reference. what reason?

codepen example

<div ng-app="app" ng-controller="controller">   <p>     <u>object</u> : {{ obj | json }}   </p>   <p>     <button ng-click="obj = {}">obj = {}</button> <!-- works -->     <button ng-click="voidit(obj)">voidit(obj)</button> <!-- doesn't work -->   </p>   <p>     <button ng-click="reset()">reset obj</button>   </p> </div> 

angular.module('app', []).controller('controller', function($scope) {    $scope.voidit = function(object) {     object = {}   }    $scope.reset = function() {     $scope.obj = { prop: "value" }   }    $scope.reset();  }); 

what nested $scope refers can become confusing, it's better use controlleras syntax. explanation, read angularjs 'controlleras' vs. '$scope'.

the codepen controlleras referencing.

but if you're looking clear reasoning why doesn't work, i'm lost well. find it's better take safer path avoids such pitfalls.