title: how to display data in one controller when an click event occurred in other controller?
body: <p>I'm new to angular.js. I just want to display "Welcome" message which is 'ControllerB' when clicking a button which is in 'ControllerA'. I tried this by using 'service' but I didn't get how to do.
  Here is my HTML code:</p>
  
  <pre><code>&lt;body ng-app='myApp'&gt;
      &lt;script src="js/angular.js"&gt;&lt;/script&gt;
      &lt;script src="script/service.js"&gt;&lt;/script&gt;
      &lt;div ng-controller='contA'&gt;
  
          &lt;input type="button" ng-click="clicked()" value="Click"&gt;
  
      &lt;/div&gt;
      &lt;div ng-controller='contB'&gt;
          &lt;div ng-show="clickShow"&gt;
              &lt;h1&gt;Welcome&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And my JS code:</p>
  
  <pre><code>var app = angular.module('myApp',[]);
  
  app.controller('contA', ['$scope', 'displayServ', function(scope,displayServ){        
      scope.clicked = function(){
          displayServ.disp = true;            
      }       
  }]);
  
  app.controller('contB',['$scope', 'displayServ', function(scope,displayServ){        
      scope.clickShow = displayServ.disp;       
  }]);
  
  app.service('displayServ', function(){
      this.disp = false;
  });
  </code></pre>