Angular Bootstrap Breakpoint Detect

bootstrap-breakpoint-angular.js

//Below is an example of a directive that let's other directives know when there has been a change in a breakpoint, as well as a 
//windows resize, the event is triggered on the window resize and broadcast to child scopes (for this reason it's best to place 
//the directive on body or a similar high level element), the arguments contain the new previousBreakpoint will likely return 
//null if there is yet to be a change in breakpoint.

app.directive('viewFrame', [function($scope) {
	return {
		controller: function($scope, $element) {
			var width = function() {
				return $element.width();
			} 
		
			var getBreakpoint = function() {
				var windowWidth = window.innerWidth;

				if(windowWidth < 768) {
					return 'extra small';
				} else if (windowWidth >= 768 && windowWidth < 992) {
					return 'small';
				} else if (windowWidth >= 992 && windowWidth < 1200) {
					return 'medium';
				} else if (windowWidth >= 1200) {
					return 'large';
				}					
			}

			currentBreakpoint = getBreakpoint();

			angular.element(window).bind('resize', function() {
				var newBreakpoint = getBreakpoint();
				var previousBreakpoint = null;

				if (newBreakpoint != currentBreakpoint) {
					previousBreakpoint = currentBreakpoint;
					currentBreakpoint = newBreakpoint;
				}

				$scope.$broadcast('windowResize', currentBreakpoint, previousBreakpoint);
			});
		}
	}
}]);

//Usage in another directive.

app.directive('sidebar', function() {
	return {
		link: function(scope, element) {
			scope.$on('windowResize', function(event, currentBreakpoint, previousBreakpoint) {
				console.log(newBreakpoint);
			});
		}
	}
});

Thanks for the tip.

I've forked this and made some improvements here:
https://gist.github.com/porjo/8638530c53472e2b9d0c