Bootstrap alert message is not working inside angular run blocks under ui-router?

I am doing sample application to autologut if user is idle for 30 Min. before 1 minutes to logOut have to show an warning message to the user.

So i have calculated the minutes and show the warning messages in Bootstrap. But alert message is Not showing properly inside run. Javascript alert is working fine but Bootstrap alert is not working.

<!DOCTYPE html>
<html ng-app="app">

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script data-require="angular.js@1.4.0 " data-semver="1.4.0 " src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script>

var app = angular.module('app', ['ui.router']);
app.run(function ($rootScope, $cacheFactory, $interval, $timeout) {

alert('1 more sec');

function load() {

    alert('you have 1 more sec to autoLogOut');
    $rootScope.showError = true;
    $rootScope.error = "helloo";
    $rootScope.errorMessage = 'you have 1 more sec to autoLogOut';
    $timeout(function () {
        $rootScope.doFade = true;
    }, 2500);
}





// Execute every time a state change begins
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, $rootScope) {


load();

});

});

</script>
</head>

<body>

<div data-ng-show="showError" ng-class="{fade:doFade} " class="alert alert-danger ">
<strong>Error:</strong>{{errorMesage}}

{{error}}</p>
</div>
</body>
</html>

Bootstrap alert not showing under $stateChangestart.