title: How to call method from one controller to other controller in AngularJs 1.7.x, to refresh the UI data
body: <pre><code>&lt;style&gt;
  .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;
  }
  &lt;/style&gt;
  &lt;div class="logo text-center"&gt;
      &lt;img src="assets/img/VfinanceSLogo.png" width="150"&gt;
      &lt;h1 class="first-letter"&gt;V&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="sidebar-wrapper"
      data-ng-if="user.userType == Constant.UserType.BORROWER.id"&gt;
      &lt;ul class="nav"&gt;
          &lt;li data-ui-sref-active="active"&gt;&lt;a href="javascript:void(0)"
              data-ui-sref="web.lams.brDashboard"&gt; &lt;i class="material-icons"&gt;dashboard&lt;/i&gt;
                  &lt;p class="item-name"&gt;Dashboard&lt;/p&gt;
          &lt;/a&gt;&lt;/li&gt;
          &lt;li data-ui-sref-active="active"&gt;&lt;a href="javascript:void(0)" data-ui-sref="web.lams.applicationList"&gt; &lt;i class="material-icons"&gt;Applications&lt;/i&gt;
          &lt;p class="item-name"&gt;Applications&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li data-ng-repeat="coApplicant in coApplicantList" data-ui-sref-active="active"&gt;
           &lt;a href="javascript:void(0)" data-ui-sref="web.lams.coApplicants({id : coApplicant.id, parentUserId : coApplicant.parentUserId})"&gt;
           &lt;i class="material-icons"&gt;{{ coApplicant.id }}&lt;/i&gt; &lt;p class="item-name"&gt;{{coApplicant.firstName}}&lt;/p&gt;&lt;/a&gt;
           &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  
  &lt;div class="sidebar-wrapper"
      data-ng-if="user.userType == Constant.UserType.LENDER.id"&gt;
      &lt;ul class="nav"&gt;
          &lt;li data-ui-sref-active="active"&gt;&lt;a href="javascript:void(0)"
              data-ui-sref="web.lams.products"&gt; &lt;i class="material-icons"&gt;dashboard&lt;/i&gt;
                  &lt;p class="item-name"&gt;Dashboard&lt;/p&gt;
          &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;div class="sidebar-wrapper"
      data-ng-if="user.userType == Constant.UserType.USER_TYPE.id"&gt;
      &lt;ul class="nav"&gt;
  
          &lt;li data-ui-sref-active="active"&gt;&lt;a href="javascript:void(0)"
              data-ng-click="go()"&gt; &lt;i class="material-icons"&gt;Clients&lt;/i&gt;
                  &lt;p class="item-name"&gt;Clients&lt;/p&gt;
          &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $('.sidebar').hover(function() {
          $('.sidebar').toggleClass('active');
  
      }, function() {
          $('.sidebar').toggleClass('active');
  
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>Above is my sideBar.html file where I am looping coApplicantList and this list is populated inside sideBarCtrl.js.</p>
  
  <pre><code>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();
  }]);
  </code></pre>
  
  <p>Above is my sideBarCtrl.js file where I am populating the 'coApplicantList' and rendered on sideBar.html</p>
  
  <pre><code>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);
           });        
      }
  });
  </code></pre>
  
  <p>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'</p>
  
  <p>I tried with factory in sideBarCtrl.js file but that is also failing in injecting inside coApplicantProfileCtrl controller.</p>