Responsive bootstrap directive for faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query detection.

<html ng-app="demo">
  <head>
    <title>Bootstrap viewport - Demo</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <h4>Viewport is {{viewport}}</h4>
        <div ng-switch on="viewport">
            <div ng-switch-when="visible-xs">Extra small devices (phones, less than 768px)</div>
            <div ng-switch-when="visible-sm">Small devices (tablets, 768px and up)</div>
            <div ng-switch-when="visible-md">Medium devices (desktops, 992px and up)</div>
            <div ng-switch-when="visible-lg">Large devices (large desktops, 1200px and up)</div>
            <div ng-switch-default>Not defined yet</div>
        </div>
        <div bv-mode="viewport"></div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script>
    <script src="bootstrap-responsive.js"></script>
    <script>
    /*global angular*/
    var demo = angular.module('demo', ['bootstrap.responsive']);
    </script>
  </body>
</html>

## Responsive bootstrap directive with prefixed breakpoints.

 - Use the predefined visibility helper classes
 - Working also with resize event

github: http://github.com/enricolucia/angular-bootstrap-responsive

/*global angular*/
var bootstrapResponsive = angular.module('bootstrap.responsive', []);

bootstrapResponsive.directive('bvMode', ['$window', '$timeout', function ($window, $timeout) {
  return {
    restrict: 'A',
    scope: {
      bvMode: '='
    },
    template: '<div class="visible-xs"></div><div class="visible-sm"></div>' +
    '<div class="visible-md"></div><div class="visible-lg"></div>',
    link: function (scope, iElement) {
      scope.markers = iElement.find('div');
      var t;

      scope.updateDisplayMode = function () {
        angular.forEach(scope.markers, function (elem) {
          if (elem.offsetParent !== null) {
            scope.bvMode = elem.className;
          }
        });
      };

      angular.element($window).bind('resize', function () {
        $timeout.cancel(t);
        t = $timeout(function () {
          scope.updateDisplayMode();
        }, 300); // check if resize event is still happening
      });

      scope.updateDisplayMode(); //fire it at least once
    }
  };
}]);