AngularJS function to another file - angularjs

Question

I have an AngularJS script (to be run on the web) and a couple of specific functions are starting to become very long, long enough that I've built a spreadsheet to generate all of the different cases, which I then simply paste into the code.
(function(){
var app = angular
.module('app',[])
.controller('HostController',HostController);
HostController.$inject = ['$scope'];
function HostController($scope){
var host = this;
host.variable = "some text";
function reallyLongFunction(a,b) {
switch(a) {
case "something":
switch(b) {};
break;
case "something else":
switch(b) {};
break;
};
}
}
})();
I want to move them out of the main file so that it's not cluttered with these long, generated functions while I work on the rest of the programme.
I could simply move the functions directly into another file, but they need to access variables of the type host.variable, and so need to be in the scope of the main Angular app, I believe?
How can I move these functions into a different file while retaining their access to these variables?

Answer 1

You can move your method to separate file by creating an angular service as well. Inject that service in your controller and access the method like someSvcHelper.reallyLongFunction(a,b). This aproach will also make this method of yours as generic and will be available for other controllers as well.
But in this case you will have to pass the variables required by this function as arguments.

Answer 2

Using nested ng-controller's you can have access to the other controller scope in the $scope.
angular.module('app', [])
.controller('ctrl', function() {
var vm = this;
vm.value = 1;
})
.controller('auxCtrl', function($scope) {
var aux = this;
aux.result = function() {
return $scope.vm.value + 5;
}
});
<div ng-app="app" ng-controller="ctrl as vm">
<div ng-controller="auxCtrl as aux">
<input type="number" ng-model="vm.value" /> <br/>
{{vm.value}} <br/>
{{aux.result()}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
Edit: What if i need more than one controller?
Well, in this case i think that nested controllers will be really cumbersome, so you can try a service that has an instance of the controllers scope.
angular.module('app', [])
.service('greeter', function() {
const self = this;
self.scope = {};
self.use = scope => self.scope = scope;
self.greet = () => 'Hello, ' + self.scope.myName;
})
.service('fareweller', function() {
const self = this;
self.scope = {};
self.use = scope => self.scope = scope;
self.farewell = () => 'Goodbye, ' + self.scope.myName;
})
.controller('ctrl', function($scope, greeter, fareweller) {
$scope.myName = 'Lorem Ipsum';
$scope.greeter = greeter;
$scope.fareweller = fareweller;
greeter.use($scope);
fareweller.use($scope);
});
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="myName"> <br>
{{greeter.greet()}} <br>
{{fareweller.farewell()}} <br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>