index.html
<body ng-controller="StoreController as s">
<h1 ng-click="s.changeValFunc()">{{s.carname}}</h1>
<h2>{{s.carname}}</h2>
</body>
app.js
var app = angular.module('store', []);
app.controller('StoreController', function() {
this.carname = "Volvo";
this.changeValFunc = function(){
this.carname="BMW";
}
});
When the h1 tag is clicked, both h1 and h2 display BMW instead of Volvo. The confusion lies in how controller properties are shared across views when clicking on elements. It seems like the "this" keyword refers to the current element being interacted with, causing a change for all elements referencing the same property.