Recently I've been playing around with the current beta distribution (0.8.3) of Angular Material Design: a set of Angular modules and resources that apply the "Material Design" style and behaviors used in Android 5.0 to an Angular website.

One of the services added by the Angular Material modules is the $mdToast service, which provides an easy way to display small pop-up notifications ("toasts") in response to events (a common behavioral convention on mobile devices). I wanted to use the $mdToast service in my httpInterceptor service function for handling HTTP response errors so that I could display a toast message if the server returned a nasty 500 HTTP status code.

But I ran into a problem: when I tried to inject $mdToast into my interceptor service factory using standard Angular dependency injection, I got a "circular dependency found" error message when I loaded my Angular app. The same thing happened when I tried injecting $mdToast into a service module of my own creation - toastService - and injecting that into my interceptor service factory.

While that did work, I came to realize that I didn't want my toast configuration and behavior logic stuck inside my interceptor method: I did in fact want a separate toastService module to handle all toast messages.

So to get around the circular dependency problem, I coded my interceptor to broadcast an "httpError" event containing the desired message text. I then created a listener for the broadcast in the run() method of my main application module that would invoke the proper function of the toastService and display the toast.

The end result is the toast message pictured below, styled with a mix of Angular Material theming and regular CSS:

Hopefully the circular dependency issue will be addressed in a future release of Angular Material so this kind of workaround becomes unnecessary (I don't see any mention of this issue in the release notes for version 0.9.0).