-Scope is applied now.

res/app/components/stf/common-ui/index.js

@@ -1,4 +1,5 @@
 module.exports = angular.module('stf/common-ui', [
+  require('./safe-apply').name,
   require('./clear-button').name,
   require('./filter-button').name,
   require('./nothing-to-show').name,

res/app/components/stf/socket/socket-state/index.js

@@ -1,6 +1,26 @@
 module.exports = angular.module('stf/socket/socket-state', [
   require('stf/socket').name,
+  require('stf/common-ui/safe-apply').name,
   require('stf/common-ui/notifications').name
 ])
   .directive('socketState', require('./socket-state-directive'))
   .controller('SocketStateCtrl', require('./socket-state-controller'))
+  .config([
+    '$provide', function ($provide) {
+      return $provide.decorator('$rootScope', [
+        '$delegate', function ($delegate) {
+          $delegate.safeApply = function (fn) {
+            var phase = $delegate.$$phase
+            if (phase === "$apply" || phase === "$digest") {
+              if (fn && typeof fn === 'function') {
+                fn()
+              }
+            } else {
+              $delegate.$apply(fn)
+            }
+          }
+          return $delegate
+        }
+      ])
+    }
+  ])

res/app/components/stf/socket/socket-state/socket-state-controller.js

@@ -2,45 +2,60 @@ module.exports = function ($scope, $element, $attrs, $transclude, socket, growl,
   var hasFailedOnce = false
 
   socket.on('connect', function () {
+    $scope.$apply(function () {
       $scope.socketState = 'connect'
     })
+  })
 
   socket.on('connecting', function () {
+    $scope.$apply(function () {
       $scope.socketState = 'connecting'
     })
+  })
 
   socket.on('disconnect', function () {
+    $scope.$apply(function () {
       $scope.socketState = 'disconnect'
+    })
     hasFailedOnce = true
   })
 
   socket.on('connect_failed', function () {
+    $scope.$apply(function () {
       $scope.socketState = 'connect_failed'
+    })
     hasFailedOnce = true
   })
 
   socket.on('error', function () {
+    $scope.$apply(function () {
       $scope.socketState = 'error'
+    })
     hasFailedOnce = true
   })
 
   socket.on('reconnect_failed', function () {
+    $scope.$apply(function () {
       $scope.socketState = 'reconnect_failed'
+    })
     hasFailedOnce = true
   })
 
   socket.on('reconnect', function () {
+    $scope.$apply(function () {
       $scope.socketState = 'reconnect'
+    })
     hasFailedOnce = true
   })
 
   socket.on('reconnecting', function () {
+    $scope.$apply(function () {
       $scope.socketState = 'reconnecting'
+    })
     hasFailedOnce = true
   })
 
   $scope.$watch('socketState', function (newValue, oldValue) {
-    console.log(newValue)
     if (newValue) {
       if (newValue === 'connecting' && oldValue) {
         growl.info(gettext('<h4>WebSocket</h4> Connecting...'), {ttl: 1000})
@@ -51,7 +66,7 @@ module.exports = function ($scope, $element, $attrs, $transclude, socket, growl,
       } else {
         switch (newValue) {
           case 'disconnect':
-            growl.info(gettext('<h4>WebSocket</h4> Disconnected.'), {ttl: 2000})
+            growl.error(gettext('<h4>WebSocket</h4> Disconnected.'), {ttl: 2000})
             break;
           case 'connect_failed':
             growl.error(gettext('<h4>WebSocket</h4> Error while connecting.'), {ttl: 2000})
@@ -63,10 +78,10 @@ module.exports = function ($scope, $element, $attrs, $transclude, socket, growl,
             growl.error(gettext('<h4>WebSocket</h4> Error while reconnecting.'), {ttl: 2000})
             break;
           case 'reconnect':
-            growl.success(gettext('<h4>WebSocket</h4> Reconnected successfully.'), {ttl: 2000})
+            growl.success(gettext('<h4>WebSocket</h4> Reconnected successfully.'), {ttl: 10000})
             break;
           case 'reconnecting':
-            growl.info(gettext('<h4>WebSocket</h4> Reconnecting...'), {ttl: 1000})
+            growl.info(gettext('<h4>WebSocket</h4> Reconnecting...'), {ttl: 10000})
             break;
         }
       }