AngularJS & EnquireJS Media Query Service

gistfile1.js

// Example Service detects a max width of 400px

// use watch & unwatch functions to set or remove breakpoint listeners
// use ismatch & notmatch functions (callbacks) to act on breakpoint changes

services.factory('max400', ['$rootScope', '$timeout', function ($rootScope, $timeout) {
    var max400 = {
        watch: function() { enquire.register('screen and (max-width: 400px)', max400handler); },
        unwatch: function() { enquire.unregister('screen and (max-width: 400px)'); },
        ismatch: function(callback) { $rootScope.$on('match400', callback); },
        notmatch: function(callback) { $rootScope.$on('unmatch400', callback); },
    };
    var max400handler = {
        match: function() {
            $timeout(function(){  // timeout ensures that this fires after your controller has loaded
                $rootScope.$emit('match400');
            });
        },
        unmatch: function(){
            $rootScope.$emit('unmatch400');
        }
    };
    return max400;
}]);

gistfile2.js

// In your controller use:
  max400.watch();  // register enquire breakpoint
  max400.ismatch(function(){
  	$scope.max400 = true;
  	console.log('MAX 400 TRUE');
  });
  max400.notmatch(function(){
  	$scope.max400 = false;
  	console.log('MAX 400 FALSE');
  });
  
  
  // to disable (if you switch to a page where it is uncessary, for instance):
  max400.unwatch();