AngularJS How to watch service variables

Question

I have a service  say   factory  aService      rootScope     resource   function   rootScope   resource      var service         foo             return service         And I would like to use foo to control a list that is rendered in HTML    lt div ng-controller  FooCtrl  gt     lt div ng-repeat  item in foo  gt    item    lt  div gt   lt  div gt    In order for the controller to detect when aService foo is updated I have cobbled together this pattern where I add aService to the controller s  scope and then use  scope  watch     function FooCtrl  scope  aService                                                                                                                                     scope aService   aService     scope foo   aService foo      scope  watch  aService foo   function  newVal  oldVal  scope        if newVal           scope foo   newVal                  This feels long-handed  and I ve been repeating it in every controller that uses the service s variables   Is there a better way to accomplish watching shared variables

User · Answer

As far as I can tell  you dont have to do something as elaborate as that  You have already assigned foo from the service to your scope and since foo is an array   and in turn an object it is assigned by reference     So  all that you need to do is something like this    function FooCtrl  scope  aService                                                                                                                                     scope foo   aService foo        If some  other variable in this same Ctrl is dependant on foo changing then yes  you would need a watch to observe foo and make changes to that variable  But as long as it is a simple reference watching is unnecessary  Hope this helps

User · Answer

while facing a very similar issue I watched a function in scope and had the function return the service variable  I have created a js fiddle  you can find the code below       var myApp   angular module  myApp        myApp factory  randomService   function  timeout       var retValue           var data   0       retValue startService   function            updateData               retValue getData   function            return data             function updateData             timeout function                data   Math floor Math random     100               updateData              500              return retValue       myApp controller  myController   function  scope  randomService        scope data   0       scope dataUpdated   0       scope watchCalled   0      randomService startService          scope getRandomData   function            return randomService getData                    scope  watch  getRandomData     function newValue  oldValue           if oldValue    newValue                scope data   newValue               scope dataUpdated                           scope watchCalled

User · Answer

Here s my generic approach   mainApp service  aService   function            var self   this          var callbacks                this foo                this watch   function variable  callback                if  typeof self variable        undefined                     if   callbacks variable                         callbacks variable                                          callbacks variable  push callback                                    this notifyWatchersOn   function variable                if   self variable   return              if   callbacks variable   return               angular forEach callbacks variable   function callback  key                   callback self variable                                       this changeFoo   function newValue                self foo   newValue              self notifyWatchersOn  foo                          In Your Controller  function FooCtrl  scope  aService         scope foo        scope  initWatchers   function             aService watch  foo    scope  onFooChange               scope  onFooChange   function newValue             scope foo   newValue              scope  initWatchers        FooCtrl  inject      scope    aService

User · Answer

I ve seen some terrible observer patterns here that cause memory leaks on large applications   I might be a little late but it s as simple as this   The watch function watches for reference changes  primitive types  if you want to watch something like array push simply use   someArray push someObj   someArray   someArray splice 0    This will update the reference and update the watch from anywhere  Including a services getter method  Anything that s a primitive will be updated automatically

User · Answer

You can always use the good old observer pattern if you want to avoid the tyranny and overhead of  watch   In the service   factory  aService   function       var observerCallbacks            register an observer   this registerObserverCallback   function callback       observerCallbacks push callback             call this when you know  foo  has been changed   var notifyObservers   function        angular forEach observerCallbacks  function callback         callback                      example of when you may want to notify observers   this foo   someNgResource query    then function        notifyObservers                And in the controller   function FooCtrl  scope  aService     var updateFoo   function         scope foo   aService foo          aService registerObserverCallback updateFoo       service now in control of updating foo

User · Answer

You can watch the changes within the factory itself and then broadcast a change  angular module  MyApp   factory  aFactory   function   rootScope           Define your factory content     var result              key   value                add a listener on a key              rootScope  watch function              return result key         function  newValue  oldValue  scope               This is called after the key  key  has changed  a good idea is to broadcast a message that key has changed          rootScope  broadcast  aFactory keyChanged   newValue          true        return result        Then in your controller   angular module  MyApp   controller  aController      rootScope   function   rootScope          rootScope  on  aFactory keyChanged   function currentCityChanged event  value               do something                In this manner you put all the related factory code within its description then you can only rely on the broadcast from outside

User · Answer

I m using similar approach as  dtheodot but using angular promise instead of passing callbacks  app service  myService   function  q        var self   this          defer    q defer         this foo   0       this observeFoo   function             return defer promise             this setFoo   function foo            self foo   foo          defer notify self foo              Then wherever just use myService setFoo foo  method to update foo on service  In your controller you can use it as   myService observeFoo   then null  null  function foo        scope foo   foo       First two arguments of then are success and error callbacks  third one is notify callback   Reference for  q

User · Answer

You can insert the service in  rootScope and watch   myApp run function  rootScope  aService        rootScope aService   aService       rootScope  watch  aService   function            alert  Watch           true         In your controller   myApp controller  main   function  scope        scope aService foo    change         Other option is to use a external library like  https   github com melanke Watch JS  Works with  IE 9   FF 4   SF 5   WebKit  CH 7   OP 12   BESEN  Node JS   Rhino 1 7   You can observe the changes of one  many or all object attributes   Example   var ex3         attr1  0      attr2   initial value of attr2       attr3    a   3  null        watch ex3  function        alert  some attribute of ex3 changes         ex3 attr3 push  new value

User · Answer

I came to this question but it turned out my problem was that I was using setInterval when I should have been using the angular  interval provider   This is also the case for setTimeout  use  timeout instead    I know it s not the answer to the OP s question  but it might help some  as it helped me

User · Answer

I have written two simple utility services that help me track service properties changes   If you want to skip the long explanation  you can go strait to jsfiddle    WatchObj    x000D   x000D  mod service  WatchObj      rootScope   WatchObjService    x000D   x000D  function WatchObjService  rootScope    x000D       returns watch function x000D       obj  the object to watch for x000D       fields  the array of fields to watch x000D       target  where to assign changes  usually it s  scope or controller instance  x000D        scope  optional  if not provided  rootScope is use x000D    return function watch obj obj  fields  target   scope    x000D       scope    scope     rootScope  x000D        initialize watches and create an array of  unwatch functions  x000D      var watched   fields map function field    x000D        return  scope  watch  x000D          function     x000D            return obj field   x000D             x000D          function new val    x000D            target field    new val  x000D            x000D           x000D          x000D        unregister function will unregister all our watches x000D      var unregister   function unregister watch obj     x000D        watched map function unregister    x000D          unregister    x000D            x000D         x000D        automatically unregister when scope is destroyed x000D       scope  on   destroy   unregister   x000D      return unregister  x000D       x000D    x000D   x000D   x000D    This service is used in the controller in the following way   Suppose you have a service  testService  with the properties  prop1    prop2    prop3   You want to watch and assign to scope  prop1  and  prop2   With the watch service it will look like that     x000D   x000D  app controller  TestWatch      scope    TestService    WatchObj   TestWatchCtrl    x000D   x000D  function TestWatchCtrl  scope  testService  watch    x000D     scope prop1   testService prop1  x000D     scope prop2   testService prop2  x000D     scope prop3   testService prop3  x000D    watch testService    prop1    prop2     scope   scope   x000D    x000D   x000D   x000D     apply Watch obj is great  but it is not enough if you have asynchronous code in your service  For that case   I use a second utility which looks like that      x000D   x000D  mod service  apply      timeout   ApplyService    x000D   x000D  function ApplyService  timeout    x000D    return function apply     x000D       timeout function        x000D       x000D    x000D   x000D   x000D    I would trigger it in the end of my async code to trigger the  digest loop  Like that     x000D   x000D  app service  TestService     apply   TestService    x000D   x000D  function TestService apply    x000D    this apply   apply  x000D    x000D  TestService prototype test3   function     x000D    setTimeout function     x000D      this prop1    changed test 2   x000D      this prop2    changed2 test 2   x000D      this prop3    changed3 test 2   x000D      this apply      trigger  digest loop x000D      bind this    x000D    x000D   x000D   x000D    So  all of that together will look like that  you can run it or open fiddle     x000D   x000D     TEST app code x000D   x000D  var app   angular module  app     watch utils     x000D   x000D  app controller  TestWatch      scope    TestService    WatchObj   TestWatchCtrl    x000D   x000D  function TestWatchCtrl  scope  testService  watch    x000D     scope prop1   testService prop1  x000D     scope prop2   testService prop2  x000D     scope prop3   testService prop3  x000D    watch testService    prop1    prop2     scope   scope   x000D     scope test1   function     x000D      testService test1    x000D       x000D     scope test2   function     x000D      testService test2    x000D       x000D     scope test3   function     x000D      testService test3    x000D       x000D    x000D   x000D  app service  TestService     apply   TestService    x000D   x000D  function TestService apply    x000D    this apply   apply  x000D    this reset    x000D    x000D  TestService prototype reset   function     x000D    this prop1    unchenged   x000D    this prop2    unchenged2   x000D    this prop3    unchenged3   x000D    x000D  TestService prototype test1   function     x000D    this prop1    changed test 1   x000D    this prop2    changed2 test 1   x000D    this prop3    changed3 test 1   x000D    x000D  TestService prototype test2   function     x000D    setTimeout function     x000D      this prop1    changed test 2   x000D      this prop2    changed2 test 2   x000D      this prop3    changed3 test 2   x000D      bind this    x000D    x000D  TestService prototype test3   function     x000D    setTimeout function     x000D      this prop1    changed test 2   x000D      this prop2    changed2 test 2   x000D      this prop3    changed3 test 2   x000D      this apply    x000D      bind this    x000D    x000D    END TEST APP CODE x000D   x000D    WATCH UTILS x000D  var mod   angular module  watch utils        x000D   x000D  mod service  apply      timeout   ApplyService    x000D   x000D  function ApplyService  timeout    x000D    return function apply     x000D       timeout function        x000D       x000D    x000D   x000D  mod service  WatchObj      rootScope   WatchObjService    x000D   x000D  function WatchObjService  rootScope    x000D       target not always equals  scope  for example when using bindToController syntax in  x000D      directives x000D    return function watch obj obj  fields  target   scope    x000D         if  scope is not provided   rootScope is used x000D       scope    scope     rootScope  x000D      var watched   fields map function field    x000D        return  scope  watch  x000D          function     x000D            return obj field   x000D             x000D          function new val    x000D            target field    new val  x000D            x000D           x000D          x000D      var unregister   function unregister watch obj     x000D        watched map function unregister    x000D          unregister    x000D            x000D         x000D       scope  on   destroy   unregister   x000D      return unregister  x000D       x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D   lt div class  test  ng-app  app  ng-controller  TestWatch  gt  x000D    prop1    prop1   x000D     lt br gt prop2    prop2   x000D     lt br gt prop3  unwatched     prop3   x000D     lt br gt  x000D     lt button ng-click  test1    gt  x000D      Simple props change x000D     lt  button gt  x000D     lt button ng-click  test2    gt  x000D      Async props change x000D     lt  button gt  x000D     lt button ng-click  test3    gt  x000D      Async props change with apply x000D     lt  button gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Building on dtheodor s answer you could use something similar to the below to ensure that you don t forget to unregister the callback    Some may object to passing the  scope to a service though   factory  aService   function       var observerCallbacks                   Registers a function that will be called when      any modifications are made            For convenience the callback is called immediately after registering      which can be prevented with  preventImmediate  param            Will also automatically unregister the callback upon scope destory          this registerObserver   function  scope  cb  preventImmediate       observerCallbacks push cb        if  preventImmediate     true          cb                scope  on   destroy   function            observerCallbacks remove cb                   function notifyObservers         observerCallbacks forEach function  cb          cb                    this foo   someNgResource query    then function        notifyObservers                Array remove is an extension method which looks like this          Removes the given item the current array         param   Object   item   The item to remove      return  Boolean         True if the item is removed      Array prototype remove   function  item     thisp           var idx   this indexOf item        if  idx  gt  -1            this splice idx  1            return true            return false

User · Answer

A wee bit ugly  but I ve added registration of scope variables to my service for a toggle   myApp service  myService   function         var self   this      self value   false      self c2   function          self callback   function            self value    self value          self c2                self on   function            return self value              self register   function obj  key            self c2   function                obj key    self value               obj  apply                           return this        And then in the controller   function MyCtrl  scope  myService         scope name    Superhero        scope myVar   false      myService register  scope   myVar

User · Answer

Without watches or observer callbacks  http   jsfiddle net zymotik 853wvv7s     JavaScript   angular module  Demo            factory  DemoService   function  timeout             function DemoService                 var self   this              self name    Demo Service                self count   0               self counter   function                    self count                     timeout self counter  1000                              self addOneHundred   function                    self count  100                             self counter                       return new DemoService                 controller  DemoController   function  scope  DemoService              scope service   DemoService            scope minusOneHundred   function                 DemoService count -  100                       HTML   lt div ng-app  Demo  ng-controller  DemoController  gt       lt div gt           lt h4 gt   service name   lt  h4 gt           lt p gt Count    service count   lt  p gt       lt  div gt   lt  div gt    This JavaScript works as we are passing an object back from the service rather than a value  When a JavaScript object is returned from a service  Angular adds watches to all of its properties   Also note that I am using  var self   this  as I need to keep a reference to the original object when the  timeout executes  otherwise  this  will refer to the window object

User · Answer

In a scenario like this  where multiple unkown objects might be interested in changes  use  rootScope  broadcast from the item being changed   Rather than creating your own registry of listeners  which have to be cleaned up on various  destroys   you should be able to  broadcast from the service in question     You must still code the  on handlers in each listener but the pattern is decoupled from multiple calls to  digest and thus avoids the risk of long-running watchers     This way  also  listeners can come and go from the DOM and or different child scopes without the service changing its behavior      update  examples     Broadcasts would make the most sense in  global  services that could impact countless other things in your app   A good example is a User service where there are a number of events that could take place such as login  logout  update  idle  etc   I believe this is where broadcasts make the most sense because any scope can listen for an event  without even injecting the service  and it doesn t need to evaluate any expressions or cache results to inspect for changes   It just fires and forgets  so make sure it s a fire-and-forget notification  not something that requires action    factory  UserService       rootScope   function  rootScope       var service    lt whatever you do for the object gt      service save   function data            validate data and update model            notify listeners and provide the data that changed  optional        rootScope  broadcast  user updated  data               alternatively  create a callback function and  broadcast from there if making an ajax call     return service         The service above would broadcast a message to every scope when the save   function completed and the data was valid   Alternatively  if it s a  resource or an ajax submission  move the broadcast call into the callback so it fires when the server has responded   Broadcasts suit that pattern particularly well because every listener just waits for the event without the need to inspect the scope on every single  digest  The listener would look like    controller  UserCtrl      UserService     scope   function UserService   scope       var user   UserService getUser          if you don t want to expose the actual object in your scope you could expose just the values  or derive a value for your purposes     scope name   user firstname        user lastname       scope  on  user updated   function event data            you could inspect the data to see if what you care about changed  or just update your own scope       scope name   user firstname         user lastname                different event names let you group your code and logic by what happened     scope  on  user logout   function event data            do something differently entirely                    One of the benefits of this is the elimination of multiple watches  If you were combining fields or deriving values like the example above  you d have to watch both the firstname and lastname properties  Watching the getUser   function would only work if the user object was replaced on updates  it would not fire if the user object merely had its properties updated   In which case you d have to do a deep watch and that is more intensive      broadcast sends the message from the scope it s called on down into any child scopes   So calling it from  rootScope will fire on every scope   If you were to  broadcast from your controller s scope  for example  it would fire only in the scopes that inherit from your controller scope    emit goes the opposite direction and behaves similarly to a DOM event in that it bubbles up the scope chain   Keep in mind that there are scenarios where  broadcast makes a lot of sense  and there are scenarios where  watch is a better option - especially if in an isolate scope with a very specific watch expression

User · Answer

I have found a really great solution on the other thread with a similar problem but totally different approach  Source  AngularJS    watch within directive is not working when  rootScope value is changed  Basically the solution there tells NOT TO use  watch as it is very heavy solution  Instead they propose to use  emit and  on   My problem was to watch a variable in my service and react in directive  And with the above method it very easy   My module service example   angular module  xxx   factory  example   function   rootScope        var user       return           setUser  function  aUser                user   aUser               rootScope  emit  user change                       getUser  function                  return  user    user   false                                      So basically I watch my user  - whenever it is set to new value I  emit a user change status   Now in my case  in the directive I used   angular module  xxx   directive  directive   function  Auth   rootScope        return                       link  function  scope  element  attrs                                 rootScope  on  user change   update                          Now in the directive I listen on the  rootScope and on the given change - I react respectively  Very easy and elegant

User · Answer

UPDATED    Very simple now in  watch   Pen here   HTML    lt div class  container  data-ng-app  app  gt      lt div class  well  data-ng-controller  FooCtrl  gt       lt p gt  lt strong gt FooController lt  strong gt  lt  p gt       lt div class  row  gt         lt div class  col-sm-6  gt           lt p gt  lt a href    ng-click  setItems     name   I am single item        gt Send one item lt  a gt  lt  p gt           lt p gt  lt a href    ng-click  setItems     name   Item 1 of 2       name   Item 2 of 2        gt Send two items lt  a gt  lt  p gt           lt p gt  lt a href    ng-click  setItems     name   Item 1 of 3       name   Item 2 of 3       name   Item 3 of 3        gt Send three items lt  a gt  lt  p gt         lt  div gt         lt div class  col-sm-6  gt           lt p gt  lt a href    ng-click  setName  Sheldon    gt Send name  Sheldon lt  a gt  lt  p gt           lt p gt  lt a href    ng-click  setName  Leonard    gt Send name  Leonard lt  a gt  lt  p gt           lt p gt  lt a href    ng-click  setName  Penny    gt Send name  Penny lt  a gt  lt  p gt         lt  div gt       lt  div gt     lt  div gt      lt div class  well  data-ng-controller  BarCtrl  gt       lt p gt  lt strong gt BarController lt  strong gt  lt  p gt       lt p ng-if  name  gt Name is     name    lt  p gt       lt div ng-repeat  item in items  gt    item name    lt  div gt     lt  div gt    lt  div gt    JavaScript   var app   angular module  app         app factory  PostmanService   function       var Postman         Postman set   function key  val        Postman key    val         Postman get   function key        return Postman key          Postman watch   function  scope  key  onChange        return  scope  watch           This function returns the value being watched  It is called for each turn of the  digest loop       function             return Postman get key                     This is the change listener  called when the value returned from the above function changes       function newValue  oldValue            if  newValue     oldValue                 Only update if the value changed            scope key    newValue               Run onChange if it is function           if  angular isFunction onChange                 onChange newValue  oldValue                                               return Postman       app controller  FooCtrl      scope    PostmanService   function  scope  PostmanService       scope setItems   function items        PostmanService set  items   items           scope setName   function name        PostmanService set  name   name              app controller  BarCtrl      scope    PostmanService   function  scope  PostmanService       scope items          scope name         PostmanService watch  scope   items      PostmanService watch  scope   name   function newVal  oldVal        alert  Hi      newVal

User · Answer

I am late to the part but I found a nicer way to do this than the answer posted above  Instead of assigning a variable to hold the value of the service variable  I created a function attached to the scope  that returns the service variable   controller   scope foo   function     return aService foo      I think this will do what you want  My controller keeps checking the value of my service with this implementation  Honestly  this is much simpler than the selected answer

User · Answer

service   nothing special here   myApp service  myService   function       return   someVariable  abc123              ctrl   myApp controller  MyCtrl   function  scope  myService        scope someVariable   myService someVariable        watch the service and update this ctrl       scope  watch function        return myService someVariable       function newValue        scope someVariable   newValue

User · Answer

I stumbled upon this question looking for something similar  but I think it deserves a thorough explanation of what s going on  as well as some additional solutions   When an angular expression such as the one you used is present in the HTML  Angular automatically sets up a  watch for  scope foo  and will update the HTML whenever  scope foo changes    lt div ng-controller  FooCtrl  gt     lt div ng-repeat  item in foo  gt    item    lt  div gt   lt  div gt    The unsaid issue here is that one of two things are affecting aService foo  such that the changes are undetected  These two possibilities are    aService foo is getting set to a new array each time  causing the reference to it to be outdated   aService foo is being updated in such a way that a  digest cycle is not triggered on the update      Problem 1  Outdated References  Considering the first possibility  assuming a  digest is being applied  if aService foo was always the same array  the automatically set  watch would detect the changes  as shown in the code snippet below   Solution 1-a  Make sure the array or object is the same object on each update   x000D   x000D  angular module  myApp       x000D     factory  aService     x000D        interval   x000D      function  interval    x000D        var service     x000D          foo     x000D           x000D   x000D           Create a new array on each update  appending the previous items and  x000D           adding one new item each time x000D         interval function     x000D          if  service foo length  lt  10    x000D            var newArray      x000D            Array prototype push apply newArray  service foo   x000D            newArray push Math random     x000D            service foo   newArray  x000D            x000D           1000   x000D   x000D        return service  x000D        x000D       x000D     factory  aService2     x000D        interval   x000D      function  interval    x000D        var service     x000D          foo     x000D           x000D   x000D           Keep the same array  just add new items on each update x000D         interval function     x000D          if  service foo length  lt  10    x000D            service foo push Math random     x000D            x000D           1000   x000D   x000D        return service  x000D        x000D       x000D     controller  FooCtrl     x000D        scope   x000D       aService   x000D       aService2   x000D      function FooCtrl  scope  aService  aService2    x000D         scope foo   aService foo  x000D         scope foo2   aService2 foo  x000D        x000D        x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D     lt link rel  stylesheet  href  style css    gt  x000D     lt script src  script js  gt  lt  script gt  x000D   lt  head gt  x000D   x000D   lt body ng-app  myApp  gt  x000D     lt div ng-controller  FooCtrl  gt  x000D       lt h1 gt Array changes on each update lt  h1 gt  x000D       lt div ng-repeat  item in foo  gt    item    lt  div gt  x000D       lt h1 gt Array is the same on each udpate lt  h1 gt  x000D       lt div ng-repeat  item in foo2  gt    item    lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    As you can see  the ng-repeat supposedly attached to aService foo does not update when aService foo changes  but the ng-repeat attached to aService2 foo does  This is because our reference to aService foo is outdated  but our reference to aService2 foo is not  We created a reference to the initial array with  scope foo   aService foo   which was then discarded by the service on it s next update  meaning  scope foo no longer referenced the array we wanted anymore   However  while there are several ways to make sure the initial reference is kept in tact  sometimes it may be necessary to change the object or array  Or what if the service property references a primitive like a String or Number  In those cases  we cannot simply rely on a reference  So what can we do   Several of the answers given previously already give some solutions to that problem  However  I am personally in favor of using the simple method suggested by Jin and thetallweeks in the comments      just reference aService foo in the html markup   Solution 1-b  Attach the service to the scope  and reference  service   property  in the HTML   Meaning  just do this   HTML    lt div ng-controller  FooCtrl  gt     lt div ng-repeat  item in aService foo  gt    item    lt  div gt   lt  div gt    JS   function FooCtrl  scope  aService         scope aService   aService       x000D   x000D  angular module  myApp       x000D     factory  aService     x000D        interval   x000D      function  interval    x000D        var service     x000D          foo     x000D           x000D   x000D           Create a new array on each update  appending the previous items and  x000D           adding one new item each time x000D         interval function     x000D          if  service foo length  lt  10    x000D            var newArray      x000D            Array prototype push apply newArray  service foo   x000D            newArray push Math random     x000D            service foo   newArray  x000D            x000D           1000   x000D   x000D        return service  x000D        x000D       x000D     controller  FooCtrl     x000D        scope   x000D       aService   x000D      function FooCtrl  scope  aService    x000D         scope aService   aService  x000D        x000D        x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script data-require  angular js 1 4 7  data-semver  1 4 7  src  https   ajax googleapis com ajax libs angularjs 1 4 7 angular js  gt  lt  script gt  x000D     lt link rel  stylesheet  href  style css    gt  x000D     lt script src  script js  gt  lt  script gt  x000D   lt  head gt  x000D   x000D   lt body ng-app  myApp  gt  x000D     lt div ng-controller  FooCtrl  gt  x000D       lt h1 gt Array changes on each update lt  h1 gt  x000D       lt div ng-repeat  item in aService foo  gt    item    lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    That way  the  watch will resolve aService foo on each  digest  which will get the correctly updated value   This is kind of what you were trying to do with your workaround  but in a much less round about way  You added an unnecessary  watch in the controller which explicitly puts foo on the  scope whenever it changes  You don t need that extra  watch when you attach aService instead of aService foo to the  scope  and bind explicitly to aService foo in the markup     Now that s all well and good assuming a  digest cycle is being applied  In my examples above  I used Angular s  interval service to update the arrays  which automatically kicks off a  digest loop after each update  But what if the service variables  for whatever reason  aren t getting updated inside the  Angular world   In other words  we dont have a  digest cycle being activated automatically whenever the service property changes     Problem 2  Missing  digest  Many of the solutions here will solve this issue  but I agree with Code Whisperer      The reason why we re using a framework like Angular is to not cook up our own observer patterns   Therefore  I would prefer to continue to use the aService foo reference in the HTML markup as shown in the second example above  and not have to register an additional callback within the Controller   Solution 2  Use a setter and getter with  rootScope  apply    I was surprised no one has yet suggested the use of a setter and getter  This capability was introduced in ECMAScript5  and has thus been around for years now  Of course  that means if  for whatever reason  you need to support really old browsers  then this method will not work  but I feel like getters and setters are vastly underused in JavaScript  In this particular case  they could be quite useful   factory  aService         rootScope     function  rootScope        var realFoo            var service           set foo a            realFoo   a           rootScope  apply                   get foo             return realFoo                               x000D   x000D  angular module  myApp       x000D     factory  aService     x000D        rootScope   x000D      function  rootScope    x000D        var realFoo       x000D   x000D        var service     x000D          set foo a    x000D            realFoo   a  x000D             rootScope  apply    x000D             x000D          get foo     x000D            return realFoo  x000D            x000D           x000D   x000D           Create a new array on each update  appending the previous items and  x000D           adding one new item each time x000D        setInterval function     x000D          if  service foo length  lt  10    x000D            var newArray       x000D            Array prototype push apply newArray  service foo   x000D            newArray push Math random     x000D            service foo   newArray  x000D            x000D           1000   x000D   x000D        return service  x000D        x000D       x000D     controller  FooCtrl     x000D        scope   x000D       aService   x000D      function FooCtrl  scope  aService    x000D         scope aService   aService  x000D        x000D        x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script src  https   ajax googleapis com ajax libs angularjs 1 2 23 angular min js  gt  lt  script gt  x000D     lt link rel  stylesheet  href  style css    gt  x000D     lt script src  script js  gt  lt  script gt  x000D   lt  head gt  x000D   x000D   lt body ng-app  myApp  gt  x000D     lt div ng-controller  FooCtrl  gt  x000D       lt h1 gt Using a Getter Setter lt  h1 gt  x000D       lt div ng-repeat  item in aService foo  gt    item    lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Here I added a  private  variable in the service function  realFoo  This get s updated and retrieved using the get foo   and set foo   functions respectively on the service object   Note the use of  rootScope  apply   in the set function  This ensures that Angular will be aware of any changes to service foo  If you get  inprog  errors see this useful reference page  or if you use Angular    1 3 you can just use  rootScope  applyAsync     Also be wary of this if aService foo is being updated very frequently  since that could significantly impact performance  If performance would be an issue  you could set up an observer pattern similar to the other answers here using the setter

User · Answer

For those like me just looking for a simple solution  this does almost exactly what you expect from using normal  watch in controllers  The only difference is  that it evaluates the string in it s javascript context and not on a specific scope  You ll have to inject  rootScope into your service  although it is only used to hook into the digest cycles properly   function watch target  callback  deep         rootScope  watch function     return eval target     callback  deep

User · Answer

Have a look at this plunker   this is the simplest example i could think of  http   jsfiddle net HEdJF    lt div ng-app  myApp  gt       lt div ng-controller  FirstCtrl  gt           lt input type  text  ng-model  Data FirstName  gt  lt  -- Input entered here -- gt           lt br gt Input is    lt strong gt   Data FirstName   lt  strong gt  lt  -- Successfully updates here -- gt       lt  div gt       lt hr gt       lt div ng-controller  SecondCtrl  gt          Input should also be here    Data FirstName   lt  -- How do I automatically updated it here  -- gt       lt  div gt   lt  div gt        declare the app with no dependencies var myApp   angular module  myApp        myApp factory  Data   function       return   FirstName             myApp controller  FirstCtrl   function   scope  Data         scope Data   Data       myApp controller  SecondCtrl   function   scope  Data         scope Data   Data

[angularjs] AngularJS : How to watch service variables?

Examples related to angularjs

Examples related to watch

Examples related to angular-services