javascript - Trouble changing object value in page, but shows up in console log as working (angularjs) -

i want change object variable mf depending on user clicks, assign object array of objects variable mf, , take them next "page".

i using ng-click assign objects mf through function. i'm using {{ mf.name }} test if new object has been assigned mf , keep drawing blank (nothing outputs page). however, when assign object manually within controller , output using console.log(), it's working. why not outputting page?

code:

app.js:

app.controller('devicecontroller', function($scope) {  $scope.showoptions = false;  var device1 = [     {         name: 'pc',         os: 'windows',         chosen: false,     },   ...   ];  var device2 = [   {...}   ... ];  var mf = {};  $scope.mf = mf;  console.log(mf);  function calculate (x) {     mf = device1[x]; }  mf = device1[0];  console.log(mf.name); //outputs correctly in console - "pc"  }); 

html:

<div ng-hide="showoptions">  <div class="osselect"><span ng-click="calculate(0); showoptions = true">win</span>     <span ng-click="calculate(1); showoptions = true">mac</span> <span ng-click="showoptions = true">test</span></div>  </div>  <div class="pageholder2" ng-show="showoptions">  <p>this 2nd page: {{ mf.name }}</p> <!-- outputs blank expression -->  <span class="back" ng-click="showoptions = false">back</span>  </div> 

you need attach function calculate scope in order invoke view binding.

so try:

$scope.calculate = function calculate (x) {     $scope.mf = device1[x]; }