I've been coding a project in AngularJS to start learning the framework, currently I'm using the angular-material library and I'm trying to implement a sidenav similar to their demo here: ponents.sidenav

Unfortunately the $mdMedia('gt-md') call within the html below is always returning false (I'm opening it on a laptop screen so it should be true) but if I log the return from $mdMedia('gt-md') in the relevant angular controller it returns true.

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-ponent-id="left" md-is-locked-open="$mdMedia('gt-md')">

Can anyone shed any light on why I'm seeing this behaviour? I've been struggling with it for a number of days now.

I've been coding a project in AngularJS to start learning the framework, currently I'm using the angular-material library and I'm trying to implement a sidenav similar to their demo here: https://material.angularjs/#/demo/material.ponents.sidenav

Unfortunately the $mdMedia('gt-md') call within the html below is always returning false (I'm opening it on a laptop screen so it should be true) but if I log the return from $mdMedia('gt-md') in the relevant angular controller it returns true.

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-ponent-id="left" md-is-locked-open="$mdMedia('gt-md')">

Can anyone shed any light on why I'm seeing this behaviour? I've been struggling with it for a number of days now.

• javascript
• angularjs
• angular-material

• 2 I think your laptop has a large screen so it does not trigger the $mdMedia('gt-md'), and when you are debugging it using somethink like chrome debugger or something else, the width of your screen is reduce and this method return true. You can try to reduce the size of your browser manually instead of run it in full screen mode – Tony Commented Apr 16, 2015 at 8:43
• Laptop has a standard 15 inch screen so I don't think it's that, also that doesn't explain why I receive true when I make the same call in javascript but false if I make it in the html? – mallen Commented Apr 16, 2015 at 8:45
• 1 It's not possible to answer that with so little info, but there is a strikingly similar issue answered on GitHub. – gkalpak Commented Apr 16, 2015 at 9:43
• Ha I'm actually just looking at the exact same issue just now on Github! I'm not adding the service to the $rootScope so will try that later and report back. Thanks for your help! – mallen Commented Apr 16, 2015 at 9:46

2 Answers 2

After looking at the link posted by @ExpertSystem adding the $mdMedia service to the $rootscope allowed me to use $mdMedia directly from my HTML code.

The problem arose because as $mdMedia is a service it is not available to the view unless it is available on the scope.

Thanks all for your help!!

If you are using "angular-material": "0.8.1" or below in yr project. Change above code to this

<md-sidenav 
  class="md-sidenav-left md-whiteframe-z2" 
  md-ponent-id="left"
  md-is-locked-open="$media('gt-md')">