Angular bind service property to a controller scope

I have 2 controllers using the same service, the first controller change the value of a property on the service, I need the second controller to know the property has changed to set the new value in his current $scope. I dont want to use broadcast, is there an elegant way to do this ?

Thank you.


You could create an object in angular service,that will have various shareable properties in it. You could directly assign that variable with your controller scope variable. So that the reference of variable use by both controller are the same, like we gave to myCtrl1 and myCtrl2 will have only one copy in there scope variable. So changes in one variable updates the other one.


  <div ng-controller="myCtrl1">
    1st Controller
    <input type="text" ng-model="model1.prop1" />
    <input type="text" ng-model="model1.prop2" />

  <div ng-controller="myCtrl2">
    2nd Controller
    <input type="text" ng-model="model2.prop1" />
    <input type="text" ng-model="model2.prop2" />


app.service('dataService', function(){
  var dataService = this;
  dataService.model = {
     'prop1': '',
     'prop2': '',


app.controller('myCtrl1', function($scope, dataService){
     $scope.model1 = dataService.model;


app.controller('myCtrl2', function($scope, dataService){
     $scope.model2 = dataService.model;

Demo Plunkr

This will be fired once your value change and you can propagate it to new controller

$scope.$watch('passValueHere', function(event, passValueHere){
     $scope.controller2Value =   passValueHere;


 ? AngularJS watch value within service
 ? var self = this?
 ? var self = this?
 ? var self = this?
 ? In knockout.js, why "this" is being assigned to "self"?
 ? What is the rationale behind the "var self = this" approach?
 ? Cached this, jQuery
 ? jQuery "this" inside click
 ? What does 'var that = this;' mean in JavaScript?
 ? Should I use self or window to reference the global scope?