AngularJS Binding Text to Scope Variable

Question

I have a text field that is being controlled by jQuery/external Javascript. I'm looking to add something that causes the text field to also be shown on another element. I'm looking to develop something like this but I know this isn't how you program it:

<span id="reading" ng-bind="reading"></span>
<div ng-bind="reading"></div>
<script>
$('#reading').text('100');
</script>

The desired output is to have 100 displayed in both the span and the div.

Answer 1

So rather that going for jQuery method to change the text, I'd change the reading scope value.

$scope.reading = '10'

But I know you wanted to call that method from external context of angular, so below is the way by which you could access the scope by having DOM query on ng-controller name .

var scope = angular.element('[ng-controller=ctrl]').scope();
scope.reading = '10'
scope.$apply(); // to update bindings.

Answer 2

If you want angular to detect your changes. you should do that in $apply(). You have to create a directive on those elements. inside that directive write a link function

link:function(scope,ele,attrs,ngModel){

      scope.$apply(update);  //trigger digest cycle 

        function update() {
              ngModel.$setViewValue(100); //changes model
              ngModel.$render();  //updates view
        }
}