title: $watch a service variable or $broadcast an event with AngularJS
body: <p>I'm using a service to share data between controllers. The application has to update the DOM when a variable is modified. I've found two ways to do that, you can see the code here:</p>
  
  <p><a href="http://jsfiddle.net/sosegon/9x4N3/7/">http://jsfiddle.net/sosegon/9x4N3/7/</a></p>
  
  <pre><code>myApp.controller( "ctrl1", [ "$scope", "myService", function( $scope, myService ){
      $scope.init = function(){
          $scope.myVariable = myService.myVariable;
      };
  }]);
  </code></pre>
  
  <p></p>
  
  <pre><code>myApp.controller( "ctrl2", [ "$scope", "myService", function( $scope, myService ){
      $scope.increaseVal = function(){
          var a = myService.myVariable.value;
          myService.myVariable.value = a + 1;
      };
  }]);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/sosegon/Y93Wn/3/">http://jsfiddle.net/sosegon/Y93Wn/3/</a></p>
  
  <pre><code>myApp.controller( "ctrl1", [ "$scope", "myService", function( $scope, myService ){
      $scope.init = function(){
          $scope.increasedCounter = 1;
          $scope.myVariable = myService.myVariable;
      };
      $scope.$on( "increased", function(){
          $scope.increasedCounter += 1;
      }
  }]);
  </code></pre>
  
  <p></p>
  
  <pre><code>myApp.controller( "ctrl2", [ "$scope", "myService", function( $scope, myService ){
      $scope.increaseVal = function(){
          myService.increaseVal();
      };
  }]);
  </code></pre>
  
  <p>In the first case, I share a variable from the service with the controller and $watch it in the directive. Here, I can modify the variable directly in this controller, or any other controller that share it, and the DOM is updated.</p>
  
  <p>In the other option, I use a function from the service to modify the variable which $broadcast an event. That event is listened by the controller, then the DOM is updated.</p>
  
  <p>I'd like to know which option is better and the reasons for that.</p>
  
  <p>Thanks.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The code in jsFiddle, is a simplified version of the real code which has more objects and functions. In the service, the value field of myVariable is actually an object with much more information than just a primitive type; that information has to be displayed and updated in the DOM. The object myVariable.value is set in every change: </p>
  
  <pre><code>myVariable.value = newValue;
  </code></pre>
  
  <p>When that happens all the DOM elements have to be updated. Since the information contained in myVariable.value is variable, the number of properties changes (I can't use an array), it's much easier to delete the DOM elements and create new ones, that's what I'm doing in the directive (but with more elements in the real code):</p>
  
  <pre><code>scope.$watch( "myVariable.value", function( newVal, oldVal ){
  
              if( newVal === oldVal ){
  
                  return;
  
              }
  
              while( element[0].children.length &gt; 0 ){
  
                  element[0].removeChild( element[0].firstChild );
  
              }
  
  
              var e = angular.element( element );
              e.append( "&lt;span&gt;Value is: " + scope.myVariable.value + "&lt;/span&gt;" );
  
          } );
  </code></pre>