diff --git a/public/app/core/directives/dash_class.js b/public/app/core/directives/dash_class.js
index 7ac13a552ec..084c920b765 100644
--- a/public/app/core/directives/dash_class.js
+++ b/public/app/core/directives/dash_class.js
@@ -31,8 +31,8 @@ function (_, $, coreModule) {
           }
         });
 
-        $scope.$watch('playlistSrv', function(newValue) {
-          elem.toggleClass('playlist-active', _.isObject(newValue));
+        $scope.$watch('playlistSrv.isPlaying', function(newValue) {
+          elem.toggleClass('playlist-active', newValue);
         });
       }
     };
diff --git a/public/app/features/dashboard/dashboard_ctrl.ts b/public/app/features/dashboard/dashboard_ctrl.ts
index acca3b7dc6b..616ce6e1cfd 100644
--- a/public/app/features/dashboard/dashboard_ctrl.ts
+++ b/public/app/features/dashboard/dashboard_ctrl.ts
@@ -20,10 +20,12 @@ export class DashboardCtrl {
     dynamicDashboardSrv,
     dashboardViewStateSrv,
     contextSrv,
+    playlistSrv,
     alertSrv,
     $timeout) {
 
       $scope.editor = { index: 0 };
+      $scope.playlistSrv = playlistSrv;
 
       var resizeEventTimeout;
 
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index c122f1aa901..034ed635e98 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/public/app/features/dashboard/dashnav/dashnav.ts
@@ -19,6 +19,7 @@ export class DashNavCtrl {
     private $location,
     private backendSrv,
     private contextSrv,
+    public playlistSrv,
     navModelSrv) {
       this.navModel = navModelSrv.getDashboardNav(this.dashboard, this);