How to call method from one controller to other controller in AngularJs 1.7.x, to refresh the UI data

Question

<style>
.sidebar .logo img {
    display: none;
}

.sidebar.active .logo img {
    display: inline-block;
}

.sidebar.active .logo .first-letter {
    display: none !important;
}

.sidebar .logo .first-letter {
    display: block;
}

.first-letter {
    margin: 0;
    font-size: 30px;
    color: red;
}

.logo {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<div class="logo text-center">
    <img src="assets/img/VfinanceSLogo.png" width="150">
    <h1 class="first-letter">V</h1>
</div>
<div class="sidebar-wrapper"
    data-ng-if="user.userType == Constant.UserType.BORROWER.id">
    <ul class="nav">
        <li data-ui-sref-active="active"><a href="javascript:void(0)"
            data-ui-sref="web.lams.brDashboard"> <i class="material-icons">dashboard</i>
                <p class="item-name">Dashboard</p>
        </a></li>
        <li data-ui-sref-active="active"><a href="javascript:void(0)" data-ui-sref="web.lams.applicationList"> <i class="material-icons">Applications</i>
        <p class="item-name">Applications</p></a></li>

        <li data-ng-repeat="coApplicant in coApplicantList" data-ui-sref-active="active">
         <a href="javascript:void(0)" data-ui-sref="web.lams.coApplicants({id : coApplicant.id, parentUserId : coApplicant.parentUserId})">
         <i class="material-icons">{{ coApplicant.id }}</i> <p class="item-name">{{coApplicant.firstName}}</p></a>
         </li>
    </ul>
</div>



<div class="sidebar-wrapper"
    data-ng-if="user.userType == Constant.UserType.LENDER.id">
    <ul class="nav">
        <li data-ui-sref-active="active"><a href="javascript:void(0)"
            data-ui-sref="web.lams.products"> <i class="material-icons">dashboard</i>
                <p class="item-name">Dashboard</p>
        </a></li>
    </ul>
</div>


<div class="sidebar-wrapper"
    data-ng-if="user.userType == Constant.UserType.USER_TYPE.id">
    <ul class="nav">

        <li data-ui-sref-active="active"><a href="javascript:void(0)"
            data-ng-click="go()"> <i class="material-icons">Clients</i>
                <p class="item-name">Clients</p>
        </a></li>
    </ul>
</div>
<script>
    $('.sidebar').hover(function() {
        $('.sidebar').toggleClass('active');

    }, function() {
        $('.sidebar').toggleClass('active');

    })
</script>

Above is my sideBar.html file where I am looping coApplicantList and this list is populated inside sideBarCtrl.js.

angular.module("lams").controller("sideBarCtrl",["$scope","$rootScope","Constant","applicationService",
        function($scope,$rootScope,Constant,$state,Notification, applicationService) {

    $scope.coApplicantList = [];

    $scope.getSideBarMenus = function() {
        applicationService.getCoApplicants().then(
            function(success) {
                console.log("getSideBarMenus :: success");
                if (success.data.status == 200) {
                    $scope.coApplicantList = success.data.data;
                } 
            }, function(error) {});
    }
    $scope.getSideBarMenus();
}]);

Above is my sideBarCtrl.js file where I am populating the 'coApplicantList' and rendered on sideBar.html

angular.module("lams").controller("coApplicantProfileCtrl", function($scope, $http, ) {
    $scope.documentResponse = {};

    $scope.createNewCoApplicant = function(){
        console.log("createNewCoApplicant");
        userService.creatCoApplicantProfile($scope.userData).then(
                function(success) {
                    $scope.isDisable = false;
                    if(success.data.status == 200){
                        Notification.info("Co-Applicant Added Successfully !");
                        $uibModalInstance.close('closed');
                        applicationService.getSideBarMenus();
                        $scope.getSideBarMenus(); // I am trying to assume that scope variable which i am having inside my controller is globally declared, How can I call method that will refresh sideBarCtrl.js data and refresh the sideBar.html UI ?

                    }else{
                        Notification.error(success.data.message);
                    }
                }, function(error) {
                    $scope.isDisable = false;
                    $rootScope.validateErrorResponse(error);
         });        
    }
});

Above is my other controller('coApplicantProfileCtrl.js') where I am adding option that will append to sideBar menus seamlessly. What I am trying to do is inject sideBarCtrl.js to my 'coApplicantProfileCtrl' controller but this is breaking somewhere else. my objective is to refresh side bar menu items inside success method of createNewCoApplicant() declared inside 'coApplicantProfileCtrl.js'

I tried with factory in sideBarCtrl.js file but that is also failing in injecting inside coApplicantProfileCtrl controller.

If you want to communicate controllers, then It is better to use events. Bind the event in one variable in a controller. Any change in controller emit the event to other controller that is listening that event. You can follow this [link](https://stackoverflow.com/questions/24129710/how-do-i-create-a-custom-event-in-an-angularjs-service) — Anil Kumar, Jul 01 '18 at 05:20
no prob. once u try it and find it helpful, plz mark it as an answer so that it can help others as well — Shashank Vivek, Jul 08 '18 at 05:16

score 1 · Accepted Answer · answered Jul 01 '18 at 05:28

Try $emit, which will emit an event

angular.module("lams").controller("coApplicantProfileCtrl", function($scope, $http,$rootScope ) {
    $scope.documentResponse = {};

    $scope.createNewCoApplicant = function(){
        console.log("createNewCoApplicant");
        userService.creatCoApplicantProfile($scope.userData).then(
                function(success) {
                    $scope.isDisable = false;
                    if(success.data.status == 200){
                        Notification.info("Co-Applicant Added Successfully !");
                        $uibModalInstance.close('closed');
                        applicationService.getSideBarMenus();
                        $rootScope.$emit('refresh-sidebar',data_if_any);

                    }else{
                        Notification.error(success.data.message);
                    }
                }, function(error) {
                    $scope.isDisable = false;
                    $rootScope.validateErrorResponse(error);
         });        
    }
});

And in sideBarCtrl

angular.module("lams").controller("sideBarCtrl",["$scope","$rootScope","Constant","applicationService",
        function($scope,$rootScope,Constant,$state,Notification, applicationService) {

    $scope.coApplicantList = [];

    $scope.getSideBarMenus = function() {
        applicationService.getCoApplicants().then(
            function(success) {
                console.log("getSideBarMenus :: success");
                if (success.data.status == 200) {
                    $scope.coApplicantList = success.data.data;
                } 
            }, function(error) {});
    }

    $rootScope.$on('refresh-sidebar',function(event,data){
        // you can access 'data_if_any' as 'data' variable
        $scope.getSideBarMenus();
    })

    $scope.getSideBarMenus();
}]);

Hi Shashank, thank you for help, I tried this way, and this works for me. — , Jul 25 '18 at 18:15

How to call method from one controller to other controller in AngularJs 1.7.x, to refresh the UI data

1 Answers1