AngularJS call a function from another controller

Question

I want to call a function or change the value of variable/s which is there inside another controller. I looked online for the solution and understood that I have to create a service and use it inside both the controller, however I am not able to understand that how service will have access to $scope.home_main and $scope.home_main variables as they are in different scope.

JS

 app.controller('Controller1', function ($scope, $window) {
     $scope.toggle = function() {
         $scope.home_main = !$scope.home_main;
         $scope.full_page_place_holder = !$scope.full_page_place_holder;
     };
 });

app.controller('Controller2', function ($scope, $window) {
    $scope.onTabSelect=function(){
    // here I want to call toggle function which is inside another controller.
    };

});

Updated HTML

<div ng-controller="Controller1">
    <div ng-hide="home_main"></div>
</div>

<div ng-controller="Controller2">
    <div ng-hide="full_page_place_holder"></div>
</div>

Looked here: SO-Q1, SO-Q2. Thanks.

Answer 1

you can create a service as follows,

angular.module('someApp').service('shareDataService', function() {

    var popup;

    var setDetails = function(param) {
        popup = param;
    };

    var getDetails = function() {
        return popup;
    };

    return {
        setDetails: setDetails,
        getDetails: getDetails,
    };
});

This service will not have access to the $scope variables of the two controllers, instead you can call getDetails and setDetails to get and set the variable in the service.

suppose you want to send the value of 'home_main' from controller1 to controller2, in controller1, you call the service function setDetails

 app.controller('Controller1', function ($scope, $window, shareDataService) {
     $scope.toggle = function() {
         $scope.home_main = !$scope.home_main;
         $scope.full_page_place_holder = !$scope.full_page_place_holder;
         shareDataService.setDetails($scope.home_main);     
     };
 });

and in controller2, you get the value by calling the service

app.controller('Controller2', function ($scope, $window) {

    var home_main_value = shareDataService.getDetails();
});

You can do a similar thing for functions also..... Hope it helps

Answer 2

You misunderstood the concept service will have a single variable that is going to be shared by two controllers:- $scope is local for controller and cannot accessed by another controller:-

FOR Example:-

myApp.factory('Data', function () {

    var data = {
        home_main : ''
    };

    return {
        gethome_main : function () {
            return data.home_main ;
        },
        sethome_main : function (home_main ) {
            data.home_main  = home_main ;
        }
    };

myApp.controller('FirstCtrl', function ($scope, Data) {

    $scope.home_main= '';

    $scope.$watch('home_main', function (newValue, oldValue) {
        if (newValue !== oldValue) Data.sethome_main(newValue);
    });
});

myApp.controller('SecondCtrl', function ($scope, Data) {

    $scope.$watch(function () { return Data.gethome_main(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.home_main= newValue;
    });
});