Bootstrap size variable in Angular controllers/services?

Question

I'd like to use a variable which stores what Bootstrap3 breakpoint(xs,sm,md,lg) the webpage currently is at to do things in Angular services/controllers (like on desktop I'd open a Kendo-UI window but on mobile I'd use a simple 100% width window).

Is there a way to set something like this up?

Answer 1

I just set a variable to bootstraps specific breakpoints and change the value of that variable to 'xs', 'sm', 'md', 'lg' with a 'watch' on the window resize.

angular.element($window).on('resize', function () {
  //set a $scope variable or a service variable that reused
  $scope.bootstrap_size = 'xs';
  $scope.is_mobile = true;
  if($window.innerWidth >=1200) {    
    $scope.bootstrap_size = 'lg';
    $scope.is_mobile = false;  
  } else if($window.innerWidth >= 992) {
    $scope.bootstrap_size = 'md';
    $scope.is_mobile = false;  
  } else if($window.innerWidth >= 768) {
    $scope.bootstrap_size = 'sm';
    $scope.is_mobile = false;  
  }
});

If dont need to have those values in angular, and if just need to see the breakpoint values in a debug toolbar can also just use default bootstrap classes to achieve this:

<div class="visible-xs"><strong>sz:</strong>xs</div>
<div class="visible-sm"><strong>sz:</strong>sm</div>
<div class="visible-md"><strong>sz:</strong>md</div>
<div class="visible-lg"><strong>sz:</strong>lg</div>