How to call angular function from jquery or call jquery function from angular

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </head>

  <body ng-app="App">
    <div ng-controller="angularCtrl" id="angularData">
      <p><a class="btn btn-lg btn-info btn-block" disable-link>Call jQuery Function from Angular</a></p>
    </div> 
    
    <p><a class="btn btn-lg btn-danger btn-block" id="jqueryBtn">Call Angular Function from jQuery</a></p>
  </body>

</html>

angular.module('App', []).controller('angularCtrl', ['$scope',
	function($scope) {
	  
	 $scope.AngularFunction = function(){
	   alert("Hello, saya angular function dipanggil oleh jquery")
	 }
	}
]).directive("disableLink", function() {
	return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            $(elem).click(function() {
                $().JqueryFunction();
            });
        }
    }
});


$(document).ready(function() {
  $("#jqueryBtn").click(function() {
    angular.element('#angularData').scope().AngularFunction();
  });
  
  (function($){
     $.fn.JqueryFunction = function() {
        alert('Hello, saya jquery function dipanggil oleh angular')
     }; 
  })( jQuery );

});

/* Styles go here */

How to call angular function from jquery or call jquery function from angular - http://gedelumbung.com