javascript - 如何在角度的每个状态变化上运行加载动画脚本

Question

我正在使用以下脚本在我的应用程序中显示加载动画。

angular.element(document).ready(function () {
    $scope.state = document.readyState
    if ($scope.state == 'interactive') {
        document.getElementById('contents').style.visibility="hidden";
    } else if ($scope.state == 'complete') {
        $timeout(function(){
            document.getElementById('interactive');
            document.getElementById('load').style.visibility="hidden";
            document.getElementById('contents').style.visibility="visible";
        },1000);
    }
});

当页面第一次加载时，这工作正常。每次状态更改时如何执行它，因为在某些状态下会获取新数据。

我试着调用这个脚本

$scope.$on('$stateChangeSuccess', function () {
    console.log('State Change');
});

但是随后应用程序将无限加载，并且永远不会停止加载。