title: AngularJS component data binding not working properly
body: <p>In the code below you can see I have a counter component that fires events on increment and decrement and those are bound to an output that is displayed. These events are on $rootScope so they can be heard on another component which works too. What doesn't work is the data binding on my watchercomponent. If you look at the console, it's receiving the event and its data properly and is even updating the message property but it isn't being update in the view. What gives? Below is my code:</p>
  
  <p><strong>Script.js</strong></p>
  
  <pre><code>angular.module('testApp', []).component('counter', {
  bindings: {
      input: '&lt;',
      output: '&amp;'
  },
  controller: function ($rootScope, $attrs) {
      this.output = $attrs.input;
  
      this.increment = function increment() {
          this.output++;
          console.log("event from counter fired");
          $rootScope.$emit('eventfromcounter', 'increment');
  
      }
  
      this.decrement = function decrement() {
          this.output--;
          console.log("event from counter fired");
          $rootScope.$emit('eventfromcounter', 'decrement');
  
      }
  
  },
  template: function ($element, $attrs) {
      return [
      '&lt;input type="text" ng-model="$ctrl.output"&gt;',
      '&lt;button type="button" ng-click="$ctrl.decrement();"&gt;-&lt;/button&gt;',
      '&lt;button type="button" ng-click="$ctrl.increment();"&gt;+&lt;/button&gt;',
      ].join('');
  }
  }).component('watchercomponent', {
      bindings: {
          message : '&amp;'
      },
      controller: function ($rootScope, $attrs)
      {
          this.message = 'waiting for event';
          $rootScope.$on('eventfromcounter', function (event, args)
          {
              console.log("recieved at anothercomponent : " + event.name + " : " + args);
              this.message = args;
              console.log("message : " + this.message);
          });
      },
      template: function($element, $attrs)
      {
          return [
              '&lt;br/&gt;&lt;span&gt;watchercomponent : {{$ctrl.message}}&lt;/span&gt;'
          ].join('');
      }
  });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;html&gt;
  
    &lt;head&gt;
      &lt;script src="angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div ng-app = "testApp"&gt;
        &lt;counter input="3"&gt;&lt;/counter&gt;
        &lt;watchercomponent&gt;&lt;/watchercomponent&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/JEBUl62zQpSo7k7CJ2RT?p=preview" rel="nofollow">Plunker</a> here.</p>
  
  <p>Also are $rootScope events good practice to share events/data between components? If not could anyone point me into the right direction?</p>
  
  <p>Thanks</p>