javascript - how to fire a controller method from another controller or directive? -

what need show values automatically when process data on controller, how can fire $scope.setoncontroller1 function on controller1 when controller2 have ended process data automatically. js fiddle http://jsfiddle.net/b2fce/228/

here html code

<div ng-app="myapp">     <div ng-controller="mycontroller1">         <button ng-click="setoncontroller1()">force values(second)</button><br/>         <ul>             <li><b>mycontroller1</b> (values won't change)</li>             <li>{{stringvalue}}</li>             <li>{{objectvalue}}</li>         </ul>     </div>         <div ng-controller="mycontroller2">         <ul>             <li><b>mycontroller2</b> (values change when set values clicked or when 2-way binding textbox modified)</li>             <li>{{stringvalue()}}</li>             <li>{{objectvalue.data}}</li>         </ul>         <input type="text" ng-model="newvalue"></input>         <button ng-click="setstring(newvalue)">set values(first)</button><br/>         <input type="text" ng-model="objectvalue.data"></input>2-way binding objectvalue     </div> </div> 

and js

var app = angular.module('myapp', []);  app.service('sharedproperties', function() {     var stringvalue = 'test string value';     var objectvalue = {         data: 'test object value'     };      return {         getstring: function() {             return stringvalue;         },         setstring: function(value) {             stringvalue = value;         },         getobject: function() {             return objectvalue;         }     } });  app.controller('mycontroller1', function($scope, sharedproperties) {     $scope.setoncontroller1 = function(sharedpoperties){     $scope.stringvalue = sharedproperties.getstring();     $scope.objectvalue = sharedproperties.getobject().data;     } });  app.controller('mycontroller2', function($scope, sharedproperties) {     $scope.stringvalue = sharedproperties.getstring;     $scope.objectvalue = sharedproperties.getobject();     $scope.setstring = function(newvalue) {         $scope.objectvalue.data = newvalue;         sharedproperties.setstring(newvalue);     //some code set values on screen @ controller1     };  }); 

here js fiddle

http://jsfiddle.net/b2fce/228/

there couple different ways. one, can broadcast event on controller2 , listen event on controller1 (like tymejv suggests). need broadcast , listen on $rootscope.

app.controller('mycontroller2', function($rootscope, $scope, sharedproperties) {   $scope.stringvalue = sharedproperties.getstring;   $scope.objectvalue = sharedproperties.getobject();   $scope.setstring = function(newvalue) {     $scope.objectvalue.data = newvalue;     sharedproperties.setstring(newvalue);     //some code set values on screen @ controller1     $rootscope.$broadcast("myevent");   };   app.controller('mycontroller1', function($rootscope, $scope, sharedproperties) {     $scope.setoncontroller1 = function(sharedpoperties){         $scope.stringvalue = sharedproperties.getstring();         $scope.objectvalue = sharedproperties.getobject().data;     }     $rootscope.$on("myevent", function() {         $scope.setoncontroller1(sharedproperties);     }); }); 

fiddle demo

similarly, can setup $watch on controller1 watch value in service.

app.controller('mycontroller1', function($rootscope, $scope, sharedproperties) {     $scope.setoncontroller1 = function(sharedpoperties){         $scope.stringvalue = sharedproperties.getstring();         $scope.objectvalue = sharedproperties.getobject().data;     }     $scope.$watch(function(){return sharedproperties.getstring()}, function(newvalue, oldvalue){         $scope.setoncontroller1(sharedproperties);     });  }); 

fiddle demo