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

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');
});

然后应用程序无限加载，反过来永远不会停止加载。