Reset data on click for a different controller

Question

I have two divs - the first contains the second. The contained div has its own controller. When I click an icon button in the container, I change a variable which then affects the visibility of the contained div.

It looks like this:

<div ng-controller="BarController">
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="col-lg-2 page-title">My Page</div>
            <div class="col-lg-10">
                <span class="actions">
                    <i class="fa fa-lg fa-download fa-inverse" tooltip="Download"
                       ng-click="showSecondaryBar=!showSecondaryBar"></i>
                </span>
            </div>
        </div>
    </div>
    <div class="download navbar download-in download-out"
         ng-class="{'myhidden': !showSecondaryBar}"
         ng-cloak>
        <div class="col-lg-offset-4 col-lg-4 form-inline form-group" ng-controller="TagsController">
            <div class="download-label col-lg-6">
            <label>Download by tags:</label>
            </div>
            <div class="download-tags col-lg-6">
            <tags-input class="bootstrap" spellcheck="false" min-length="1" ng-model="tags" add-from-autocomplete-only="true">
                <auto-complete source="loadTags($query)" min-length="1" load-on-down-arrow="true"
                               load-on-focus="true" max-results-to-show="5"
                               highlight-matched-text="false"></auto-complete>
            </tags-input>
                </div>
        </div>
    </div>
</div>

The <tags-input> is taken from ng-tags-input and I would like to reset the tags that were already typed to it whenever the icon button is clicked (which changes the visilibyt of the div that contains the ng-tags-input).

Problem is, because I have the TagsController which contains the data (tags) and this data is not visible in the BarController, I'm not sure how I can reset the tags array to become empty.

I thought of using a service but it fills like too much of a coupling. I would prefer to have a function in TagsController which is called upon click. But I can't figure out how to do it from another controller

Answer 1

You can use $broadcast on $rootScope to send an event to TagsController. So TagsController can receive this event by registering an event listener for it. See following example.

Refer to $rootScope API docs

angular.module('app',[])
.controller('ParentController', function($rootScope) {
    var parentCtrl = this;
  parentCtrl.someFlag = true;
  
  parentCtrl.changeFlag = function() {
    parentCtrl.someFlag = !parentCtrl.somFlag;
    $rootScope.$broadcast('resettags', {'defaultTags': 'whatever_tag'});
  }
  })
.controller('ChildController', function($rootScope){
    var childCtrl = this;
    childCtrl.tags = "Some tags entered by user";
  $rootScope.$on('resettags', function(event, args) {
      
      childCtrl.tags = args.defaultTags;
    });
  });

.myHidden {
  display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

  <div id="main" ng-controller="ParentController as parentCtrl">
      <button type="button" ng-click="parentCtrl.changeFlag()">Toggle</button>
      <div ng-class="{'myHidden' : !parentCtrl.someFlag}">
        <div ng-controller="ChildController as childCtrl">
              <h1>{{childCtrl.tags}}</h1>
          </div>
    </div>
  </div>
</div>