I am calling an angularjs function from an javascript function. from javascript function I am passing a variable and assing the variable to $scope.usersName. But the value is not changing.
Below is the code that I have written
<!DOCTYPE html>
<html data-ng-app="javaScript">
<head>
<meta charset="ISO-8859-1">
<title>Call AngularJS function using JavaScript</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">
var serviceModule = angular.module('javaScript', []);
serviceModule.controller('javaScriptController', function($scope) {
$scope.javaScriptCallAngular = function(value) {
$scope.usersName = value;
};
});
function javaScriptCall(value){
var scope = angular.element(document.getElementById('idForJS')).scope();
scope.javaScriptCallAngular(value);
}
</script>
</head>
<body id="idForJS" data-ng-controller="javaScriptController">
<h2>Click below to get User Name:</h2>
<div>
<button onclick="javaScriptCall('Java Honk')">Get User name from JavaScript call to AngularJS</button>
<div>User Name: {{usersName}}</div>
</div>
</body>
</html>
may be you can use, $scope.$apply() - it will works.
$scope.javaScriptCallAngular = function(value) {
$scope.usersName = value;
$scope.$apply();
};