Calling an AngularJS function from outside the scope of an Angular App

Question

I have seen a lot of questions related to this matter but no solution I've tried is working:

Inside the folder public I have a file called app.js where I define my AngularJS application like this:

var app = angular.module('app', []);
var RectangleDim=30;

app.controller('MainCtrl', function($scope, $http) {

And in the end of the file I do the bootstrap like:

angular.bootstrap(document.getElementById('body'), ["app"]);

Then, inside the same folder and inside the HTML my entry point for the application of AngularJS is like this:

 <div id="body">
<div ng-controller="MainCtrl">
    <div class="col-sm-6 col-md-6 col-lg-6" style="background-color: #D2D7D3">

        <div style="padding:25px;">

Then, on another folder, I have another JS file, where I need to call a specific function that is defined in the AngularJS code. The function is called Draw() and it is triggered when I click on an AngularJS button.

To simply call the function inside another file without clicking on any button I am doing something like this:

        var e = document.getElementById('body');
        var scope = angular.element(e).scope();
// update the model with a wrap in $apply(fn) which will refresh the view for us
        scope.$apply(function() {
            scope.Draw(NumQuest);
        });
        //fim

EDIT: In order to make my question a bit more clear, I can maybe add a few more details:

I only need to have one controller and a single module controlling my whole application because all the actions needed (which is calling 3 functions that update an SVG picture) are relatively self-contained, so I don't think there is any need to add complexity to the client-side code, which only might confuse me and other people working with me.

To recall what I need:

Inside a single app, with one controller, I have one function, Draw(someInputValue), that is generating an SVG figure. The input for this function is being received from a text input box.

On another file I have JS actions that are performed when I click on another text box (for example, show an alert or creating an additional text box). What I want is to associate a call to Draw(input) when I click on the text box.

Namely, I want to simulate the behaviour I have when I click on a button that reads a number from a text box and does some actions, but, instead, of having the input introduced by hand on a text box and clicking on a button, I want to simply click on a text box and perform the same action.

Answer 1

In this case, you may wish to use $broadcast to relay your messages/data, and use $on to perform the action.

This practice should be limited, however, and used wisely to assure you don't have a noticeable performance hit down the road.

Working with $scope.$emit and $scope.$on