How to hide some element on screen resize in angularjs

I am new in angularjs. I searched a lot to hide some html element on body resize but did't work. here is my controller code.

var app = angular.module('studentPage',[]);

    app.controller ('studentController',function($scope, $window) {

    var appWindow = angular.element($window);

    appWindow.bind('resize', function () {
        if($window.innerWidth < 600){
            alert("hello");
            $scope.ohh = true;
        }
  });

});

and here where i use ng-show

<div id="sidebar-wrapper" ng-show="ohh">

If you want to achieve this using AngularJS, you need to relaunch the digest cycle using $scope.$apply().

appWindow.bind('resize', function () {
    if($window.innerWidth < 600){
        $scope.ohh = true;
        $scope.$apply();
    }

});

Anyway, I think a cleaner way to do that is using CSS media queries:

@media only screen and (max-width: 599px) {
    #sidebar-wrapper {
        display: none;
    }
}