title: UI Notifications with angular js
body: <p>I have to implement some standard notification UI with angular js. My approach is the following (simplified):</p>
  
  <pre><code>&lt;div ng-controller="MainCtrl"&gt;
    &lt;div&gt;{{message}}&lt;/div&gt;
    &lt;div ng-controller="PageCtrl"&gt;
       &lt;div ng-click="showMessage()"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And with the page controller being:</p>
  
  <pre><code>module.controller("PageCtrl", function($scope){
    counter = 1
    $scope.showMessage = function(){
      $scope.$parent.message = "new message #" + counter++;
    };
  });
  </code></pre>
  
  <p>This works fine. But I really don't like the fact that I need to call $scope.$parent.</p>
  
  <p>Because if I am in another nested controller, I will have $scope.$parent.$parent, and this becomes quickly a nightmare to understand.</p>
  
  <p>Is there another way to create this kind of global UI notification with angular?</p>