Angular changing controller variable after installation?

var jem = 55;

var app = angular.module("store",[]);
app.controller("storeController",function(){
  this.product = jem;
});


jem = 0;
      

<!DOCTYPE html>
<html ng-app="store">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="storeController as store">
  <p>{{"HI"}}</p>
  <p>{{store.product}} </p>

</body>
</html>
      

Run codeHide result


Why is this output "0" instead of "55"? Since jem is a base javascript variable, when the product is assigned by jem, it gets its value copied and not changed when the jem changes?

+3


source to share


1 answer


Note that your controller definition is inside a callback function (as it should be ...)

app.controller("storeController", function(){
  this.product = jem;
});

      



A side effect of this, pertaining to your question, is that the assignment statement in the callback this.product = jem

will be executed after the assignment statement jem = 0

, outside the callback.

The takeaway is that callbacks don't happen sequentially with the rest of your code.

+3


source







All Articles