How to change AngularJS data outside the scope

Today I learn how to update scope data outside of controller or app. Angular have $scope.$apply() method which will explicitly update your binded data. Sharing sample code how I did that:

 <div ng-app="mySampleApp" ng-controller="sampleCtrl">
 <h1>{{mydata}}</h1>
</div>
<input type="button" value="Change to 'test data'" ng-model="data" onclick="change()">

Angular JS code

var app = angular.module('mySampleApp', []);
app.controller('sampleCtrl', function($scope, $http) {
  $scope.mydata = "Dummy Text";
});


function change() {
   //if you have single controller in your page than you can do like this
    var appElement = document.querySelector('[ng-app=mySampleApp]');
   // you have multiple controller inside single app than you can do like this:
    //var appElement = document.querySelector('[ng-controller=sampleCtrl]');
    var $scope = angular.element(appElement).scope();
    $scope.$apply(function() {
        $scope.mydata = 'test data';
    });
}

Sample Fiddle A good article about $apply. [si-contact-form form='1']