AngularJS how to invoke the ng-show on a div from another controller

Question

I am new to AngularJS and trying to use it on an enterprise project. I have scaled many hurdles so far, but everyday with its issue! Please, I need your help on this.

The functionality on this screen is a 2 step process. When the page is first loaded the div1 is displayed and populated. But, div2 is displayed with only a button.

Then, when the user clicks on the button in div2, div2 is populated by info from server. So, we end up with div1 and div2 on the screen. The 2 divs have unique angularjs controllers.

My problem is how to show and hide the div2, when user clicks on the link (toggleDiv2) within div1.

The show/hide is required to restart the processing ie clicking the the link (toggleDiv2) repopulates div1 with new set of html controls for a new web service call to populate div2. I have tried simplifying the scenario.

I have used the services for sharing data between controller and done show/hide within same controller. But, this one is show/hide between multiple controllers, it beats me o! Any help will be appreciated. Thanks.

<div id="div1" ng-controller="EventSourceCtrl">

         <a id="toggleDiv2" href="#" ng-  click="functionDefinedInEventDestinationCtrl('false');"> Close Div named myDiv </a>

</div>

<div id="div2" ng-show="someFlagOrFunctionInaControllerOrService" ng-controller="EventDestinationCtrl">

    <button id="buttonId" type="button" ng-click="getInfoFromServerToPopulateDiv2()" class="btn"></button>

</div>

Answer 1

You just need to set your flag to true from the EventSourceCtrl

// js

app = angular.module('app', [])

app.controller('EventSourceCtrl', function($scope) {
  $scope.functionDefinedInEventDestinationCtrl = function () {
    $scope.someNameSpace || ($scope.someNameSpace = {});
    $scope.someNameSpace.someFlagOrFunctionInaControllerOrService = true;
  }
});

// html

<div id="div2" ng-show="someNameSpace.someFlagOrFunctionInaControllerOrService" ng-controller="EventDestinationCtrl">