如何使用angularjs中的响应数据从服务重定向到控制器？

Question

I need some help and I'm new to the angularjs.

I have created an app for tours, Here I have three controllers for each page and one service for getting data from the response.

I have four button (links look like Spanish, France, India, America, etc.) on my each page footer.

My problem is while clicking on the location button in the main controller (packageController) I'm able to access the response data without redirecting because this is same controller, But I have other pages which have controller 1 & 2, from these controller I need to redirect to the main controller, but I'm failing to achieve this.

app:

var app = angular.module("dashboard");

Service:

app.factory('packageService',function($http) {
    return {
        getData: function (location) {
            var promise = $http({
                method:'GET',
                url:"index.php/tours" ,
                params:{'keyword': location}
            })
                .success(function (data, status, headers, config) {
                    return data;
                })
                .error(function (data, status, headers, config) {
                    return {"status": false};
                });
            return promise;
        }
    }
});

Main Controller: This is working

app.controller("packageController", function($scope, packageService){
    $scope.footerLink = [
        link1 : paris,
        link2 : india,
        link3 : america
    ];

   $scope.goBtn = function(search){            
        packageService.getData(search.location).then(function(promise){
            $scope.packages = promise.data;
        });
    };

}

Controller 1

If i click on one of those footer links from my site i'm calling goBtn() , but is not redirecting.

app.controller("hotelController", function($scope, packageService){
    $scope.footerLink = [
        link1 : paris,
        link2 : india,
        link3 : america
    ];

    $scope.goBtn = function(search){            
        packageService.getData(search.location).then(function(promise){
            $scope.packages = promise.data;
        });
    };

}

Controller 2

app.controller("flightController", function($scope, packageService){
    $scope.footerLink = [
        link1 : paris,
        link2 : india,
        link3 : america
    ];

    $scope.goBtn = function(search){            
        packageService.getData(search.location).then(function(promise){
            $scope.packages = promise.data;
        });
    };
}

For Page Flow Understaing, Please see this below image.

Note : Might be my approach will be wrong, Please help me!

Answer 1

Try passing the service as a dependency also to the controllers, if that doesn't work, try solving it as explained below :

I was facing the same problem. I solved it like this :

I made module different modules for each pages, each module had a controller in it. The module of the first page contained the service. To use the same service in different controllers, I passed the first module (which contains the service) as a dependency in other modules and then passed the service of the first module as a dependency in the controller and as an argument in the function of the controller.

So basically I had a separate Javascript file for each page with a module containing a controller with the main module and service passed as dependencies.

Make the first module :

var app = angular.module('Dashboard', ['ngRoute']);

Make the first controller in the same manner.

Make the service in the same manner :

    app.service('packageService', ['$rootScope','$http', function($rootScope, $http){
    this.getPackageData=function(){
           ...
           return...
    };
}]);

Make a different module for second controller and pass First module (Dashboard) as a dependency :

var app2 = angular.module('SecondPagemodule', ['ngRoute', 'Dashboard']);

Make the controller in the second module and pass the service as a dependency and as a parameter to the function of controller.

    app2.controller('ControllerForSecondPage', ['$scope', '$http', 'PackageService', function($scope, $http, PackageService){

           ...
           ...
}]);

I hope this helps.