bootstrap-screensize

Angular v1.x module for screen width/height and Bootstrap's breakpoints.
Updates the properties on screen resize.
Configure the debounce rate for performance requirements.

Usage

Get bootstrap-screensize for your project:

bower i bootstrap-screensize --save

Add it to your HTML file:

<script src="bower_components/angular-debounce/dist/angular-debounce.min.js"></script>
<script src="bower_components/bootstrap-screensize/dist/bootstrap-screensize.min.js"></script>

Configuration (optional):

angular
  .module('app', ['bs.screenSize'])
  .controller('testCtrl', function(bsScreenSize){
// default debounce rate
bsScreenSize.config({debounce:100});

});

Use it in modules:

angular
.module('app', ['bs.screenSize'])
.controller('testCtrl', function($rootScope, bsScreenSize){ // bsScreenSize is an optional dependency
// responsive properties, updates on screen resize
bsScreenSize.state; // 'xs','sm','md' or 'lg'
bsScreenSize.width; // 1200
bsScreenSize.height; // 800

// static functions
bsScreenSize.isScreenXs(); // bool
bsScreenSize.isScreenSm(); // bool
bsScreenSize.isScreenMd(); // bool
bsScreenSize.isScreenLg(); // bool
var state = bsScreenSize.currentState(); // 'xs','sm','md' or 'lg'
var width = bsScreenSize.currentWidth(); // 1200
var height = bsScreenSize.currentHeight(); // 800

// also available in the $rootScope for convenience
$rootScope.bsScreenSize.state; // 'xs','sm','md' or 'lg'
$rootScope.bsScreenSize.width; // 1200
$rootScope.bsScreenSize.height; // 800

});

Use it in views:

    <ANY ng-show="bsScreenSize.state == 'lg'"></ANY>
    <ANY ng-show="bsScreenSize.width >= 1200"></ANY>
    <ANY ng-class="{'some-class': bsScreenSize.state == 'lg'}"></ANY>
    <ANY ng-style="{'height': (bsScreenSize.height - 200) + 'px', 'margin-top': (bsScreenSize.state == 'xs')?'0':'10px' }"></ANY>