title: What is the best way to do error handling globally in an angular.js app?
body: <p>I have an app which makes http calls using various services I created. When the server request fails or when the api returns an error attribute I would like to display these errors on the top of my page.</p>
  
  <p>I can see in the angular documentation that error can best be displayed this way, which makes sense:</p>
  
  <pre><code>&lt;div ng-controller="AlertDemoCtrl"&gt;
    &lt;alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"&gt;{{alert.msg}}&lt;/alert&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in the AlertDemoCtrl:</p>
  
  <pre><code>  $scope.addAlert = function() {
      $scope.alerts.push({msg: "Another alert!"});
    };
  
    $scope.closeAlert = function(index) {
      $scope.alerts.splice(index, 1);
    };
  </code></pre>
  
  <p>The thing is that I'm not sure how to push the errors into the alerts within the AlertDemoCtrl since the http request is happening within the services where I don't have access to the AlertDemoCtrl. Do I need to broadcast events in order to add them into the AlertDemoCtrl or is there a way to inject a controller into a service? Or do I need to add the addAlert function into $rootScope?</p>
  
  <p>Appreciate any advice, thank you!</p>