How to have loading animation script run on every state change in angular

Question

I am using the following script to show loading animation in my application.

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

This works fine when page loads for the first time. How do I execute it every time state changes, as in some state there is new data being fetched.

I tried calling this script in

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

but then the application is loading infinitely and in turn never stops loading.