title: Call function from another controller using Events in AngularJS
body: <p>I am new bie with AngularJS.</p>
  
  <p>I am trying to call function from another controller.</p>
  
  <p>I found that there are sever ways to do that.</p>
  
  <p>1) Shared Service</p>
  
  <p>2) Using Events</p>
  
  <p>Here is the link that i already checked out.</p>
  
  <p><a href="https://stackoverflow.com/questions/9293423/can-one-controller-call-another">Can one controller call another</a></p>
  
  <p><a href="https://stackoverflow.com/questions/25417162/how-do-i-inject-a-controller-into-another-controller-in-angularjs">How do I inject a controller into another controller in AngularJS</a></p>
  
  <p>I think that using events is better approach. Apart from that i think when we use $rootscope it is not destroying event reference right?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myModule = angular.module('myapp', []);
  
  myModule.controller('otherController', function($scope) {
    $scope.$on('ShowDialog', function(event) {
      alert("hello");
    });
  });
  
  myModule.controller('myController', function($scope) {
    $scope.OnClick = function() {
      alert("Done");
      $scope.$emit('ShowDialog');
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div style="padding: 0 5px; height: 100%" ng-app="myapp"&gt;
    &lt;div style="padding: 0 5px; height: 100%" ng-controller="myController"&gt;
  &lt;input type="button" ng-click="OnClick()" value="Say Hello!" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please let me know what i am missing? And what is the best way to do it?</p>