Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl" ng-class = "state">

  <input type = "button" ng-click = "run()" value = "$timeout"></input> 
  <input type = "button" ng-click = "run2()" value = "setTimeout"></input> 
  
</div>

CSS

div {
  width: 100%; 
  height: 500px; 
  background-color: grey; 
}

canvas {
  background-color: blue; 
}

.busy {
  
  cursor: wait; 
}

.ready {
  
  cursor: default; 
}

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.service('MyService', function($timeout, $rootScope){

	this.run = function(){
  		$rootScope.$broadcast("busy"); 
      
      $timeout(function(){
      	console.log("foo"); 
        $rootScope.$broadcast("unbusy"); 
      }, 2000); 
      
  }; 
  
  	this.run2 = function(){
  		$rootScope.$broadcast("busy"); 
      
      setTimeout(function(){
      	console.log("foo"); 
        $rootScope.$broadcast("unbusy"); 
      }, 2000); 
      
  }; 
}); 

function MyCtrl($scope, MyService, $rootScope) {
    
    $scope.state = 'ready'; 
    
    $rootScope.$on("busy", function(){
    	$scope.state = "busy"; 
    });
    
    $rootScope.$on("unbusy", function(){
    	$scope.state = "ready"; 
    })
    
    $scope.run = function(){
    	MyService.run(); 
    }
    
      $scope.run2 = function(){
    	MyService.run2(); 
    }
}