angular value is not reflecting from the function

Question

I am trying to assign value to $scope variable from a controller function. I can see the value is assigned from console but it is not reflecting in html page.

my html

<div id="NodeDetails" class="NodeDetails">{{NodeDetails}}</div>

my controller function

$scope.ShowDetails = function() {
    $scope.NodeDetails = "in am called in function";
    console.log($scope.NodeDetails)     
};

i can see the data in console but same is not displayed in html.

it works when i put,

$scope.NodeDetails = "in am called in individual";

is there any specific way to set variable in function. I have tried by return value also but that also didn't work.

$scope.NodeDetails = function() {
return "in am called in function";  
};

please suggest.

Answer 1

It should work either way, here's an example of different type of setters

 angular.module("app", []).controller("myCtrl", function($scope){ $scope.val = "default value"; $scope.change = function(){ $scope.val = $scope.text; $scope.text =""; }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="myCtrl"> {{val}} <input type="text" ng-model="text" placeholder="Add something"/> <button ng-click="change()">Change</button> </div> 

Answer 2

Instead of creating NodeDetails as a string, change it to an object and try changing it https://jsfiddle.net/paka2/d0mf0g9j/1/

<div id="NodeDetails" class="NodeDetails">{{nodeObject.NodeDetails}}</div>   
$scope.nodeObject = {
NodeDetails: ""
}

This solves the problem of any child scope issue