Responsive template swapping with Angular Directives

I've posted a few days ago on responsive template swapping with Backbone, here's an example showing how to do that in Angular using a custom Directive.

See the Pen hfAxn by Chang Wang (@cheapsteak) on CodePen

The custom breakpoint directive takes a media-query as an argument (in this case min-width: 44.375em) and creates a MediaQueryList mql and a MediaQueryListListener mqlListener, which will update our custom scope variable matches so it will always reflect the result of the media-query (in our case, scope.matches will be false when width is smaller than 44.375em and true when width is larger).

Since the media-query event that triggers the change to the scope variable matches is not generated by Angular, we will need to update our view by calling scope.$apply() to manually start the digest cycle. However, since page-load doesn't trigger media-query events, and since we still want the right layout to be displayed on page-load, we also need to make a direct call to mqlListener(mql) during the directive's initialization, which is during an existing digest cycle. Calling scope.$apply() then would result in an Action Alredy In Progress error, so we check scope.$$phase and only call scope.$apply when not in an existing digest cycle. Hence the weird looking:

if(!scope.$$phase) { // make sure we're not in the middle of a digest cycle
    scope.$apply(); //start the digest cycle

This and the Backbone example are available on GitHub. Shoot me a pull request or a tweet and let me know what you think!