How to split single controller in multiple js files in angularjs [closed]

Use multiple controller to handle the task in your page. If using a larg controller is unavoidable ,you can split the definition to multiple files by passing the scope to another method and then define the rest of methods there.

In the first file:

app.controller('CtrlA', function($scope){
app.expandControllerA($scope);

});

In the second file

app.expandControllerA = function($scope)
{

}

You can pass any variable or dependencies to expandControllerA function.

You could use App.factory or app.service in your angular module, They would be more like inhereting the data in your snippet. so that you can assign the part of data out tside the main controller and inherite the assigned variable in your controller.

    app.factory('name of the factory',function(){
return (data)
   )
app.controller('$scope','name of the factory', function(scope, name of the factopry

$scope.new = data;
))

You can also create a base controller and use $controller service to create derived controllers.

For example:

function BaseCtrl($scope, options) {
    var vm = this;

    // code
    return vm;
}

function ChildCtrl($controller, $scope) {
    var vm = $controller('BaseCtrl', {
        $scope: $scope,
        options: { }
    });

    // extend view model
    vm.name = '';

    return vm
}

There are other ways to split controllers into separate files, check out this ng-conf video.