@MikeMcCaughan makes a valid point, it's definitely not the best practice! However, if you find yourself in a situation where you absolutely must do it, here's a straightforward example showcasing how to achieve this using a controller and Vanilla JS for accessing its variables and functions externally.
index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="myController" ng-controller="myController as vm">
My name is {{vm.fullName}}
</div>
<br>
<button onclick="accessControllerScopeVar()">Get full name</button>
<button onclick="accessControllerScopeFunction()">Say hello !</button>
</body>
</html>
script.js
angular.module('app', []);
angular
.module('app')
.controller('myController', ['$scope', function ($scope) {
var vm = this;
vm.fullName = 'Marty McFly';
vm.getFullName = function() {
return vm.fullName;
}
}]);
function accessControllerScopeVar() {
var scope = getScopeFor("myController");
scope.$apply(function () {
alert(scope.vm.fullName);
});
}
function accessControllerScopeFunction() {
var scope = getScopeFor("myController");
scope.$apply(function () {
alert('Hello ' + scope.vm.getFullName());
});
}
function getScopeFor(id) {
var el = document.getElementById(id);
var scope = angular.element(el).scope();
return scope;
}
Check out the Plunker for a live demo: https://plnkr.co/edit/7U78a6Xdlaef2qOgwucC?p=preview
Another Approach
In case you prefer not to use ids, here's an alternative method utilizing document.querySelector:
https://plnkr.co/edit/AtAoJhU9zUhYZLC5US5Y?p=preview