 <p>I would approach it by using a variable in the scope to hold the state, and chaining <code>$timeout</code>s to move between the states. So on the element that will be clicked:</p> <pre><code>&lt;span ng-click="startChange()"&gt;Click me to start&lt;/span&gt; </code></pre> <p>and in the controller:</p> <pre><code>$scope.state = 'a'; $scope.startChange = function() { $scope.state = 'b'; return $timeout(angular.noop, 30 * 1000).then(function() { $scope.state = 'c'; return $timeout(angular.noop, 60 * 1000); }).then(function() { $scope.state = 'd'; return $timeout(angular.noop, 120 * 1000); }).then(function() { $scope.state = 'e' }); } </code></pre> <p>The <code>angular.noop</code> is just a function that does nothing. It's a slightly personal preference, but I find it a bit easier to see the flow of activity where the callback passed to <code>$timeout</code> does nothing, and all action on the scope are always in the <code>then</code> success callback of the promise.</p> <p>In the template for the background div:</p> <pre><code>&lt;div class="background-state-{{state}}"&gt;....&lt;/div&gt; </code></pre> <p>and then in CSS set the colours:</p> <pre><code>.background-state-a {background-color: red} .background-state-b {background-color: green} .background-state-c {background-color: blue} ... </code></pre> <p>However, I'm not sure what else you have in the controller or your exact use-case. You might want to separate some logic out into a directive, as it might be mixing business logic with view logic.</p>