Angular one-time bindings for object properties - angularjs

Question

I want to make performance optimization of my app. And I came across the following issue. Let me have an object with multiple keys (which are not changeable within one object) and a view similar to this:
<div ng-if="vm.model">
<span>{{ vm.model.property1 }}</span>
<span>{{ vm.model.property2 }}</span>
<span>{{ vm.model.property3 }}</span>
</div>
I would have wanted to use one-time bindings for my properties, but if I change vm.model inside the controller to another object by reference, then my expressions won't be updated inside the view, unless I do an explicit change of model to a falsy value and trigger a digest cycle somehow, to force the whole block to be removed and then recompiled.
Is there a way I can avoid having these 3 redundant watchers, since these properties shouldn't be watched, but only the parent object reference should.

Answer 1

https://docs.angularjs.org/guide/expression
Try this
<div ng-if="vm.model">
<span>{{ ::vm.model.property1 }}</span>
<span>{{ ::vm.model.property2 }}</span>
<span>{{ ::vm.model.property3 }}</span>
</div>

Answer 2

#Alexey Katayev Based on my understanding of your problem the issue is not related with AngularJS but its a point about how JavaScript works with the references passed to functions.
Check this post on Is JavaScript a pass-by-reference or pass-by-value language? and the below simple example, I hope it will be of help to you in order to solve your problem.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.model = data[0];
vm.changeModel = changeModel;
function changeModel(model) {
model.property1 = data[1].property1;
model.property2 = data[1].property2;
model.property3 = data[1].property3;
}
}
var data = [
{ property1: 'Property 1', property2: 'Property 2', property3: 'Property 3' },
{ property1: 'Property 4', property2: 'Property 5', property3: 'Property 6' },
{ property1: 'Property 7', property2: 'Property 8', property3: 'Property 9' }
];
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as vm">
<button type="button" ng-click="vm.changeModel(vm.model)">Change Model</button>
<div ng-if="vm.model">
<span>{{ vm.model.property1 }}</span>
<span>{{ vm.model.property2 }}</span>
<span>{{ vm.model.property3 }}</span>
</div>
</div>
</div>