Bubble Sorting Visualization. Angular make visualization easier.

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Bubble Sorting Visualization</h1>
  
  
  <div ng-controller="ctrl">
    <div class="value-line" ng-repeat="i in data" style="width:{{i*10}}px;">{{i}}</div>
    
    <button ng-click="start()">sort</button>
    <button ng-click="reset()">reset</button>
    <span style="color:red">{{alertMsg}}</span>
    
  </div>
  
  
  </body>

</html>

// Code goes here

function ctrl($scope,$timeout){
  var defaultData=[54,16,37,28,29,24,21,11,5,10,4,3,8,1,25,12,20,30];

 $scope.reset=function(){
    $scope.data=defaultData.map(function(i){
      return i;
    });
    pointer=0;
    checklen=$scope.data.length;
	  $scope.alertMsg="";
   
  }
	 
  
  var sorting=function(){
    var data=$scope.data;
  
    
    if(data[pointer]>data[pointer+1])
    {
      var tmp=data[pointer]; 
      data[pointer]=data[pointer+1];
      data[pointer+1]=tmp;
    }
    
   pointer++;
    if( pointer>=checklen){
      checklen--;
      pointer=0;
    }
    
    if(checklen <=0){
     $scope.alertMsg="sorting done";
    }else{
      $timeout(sorting,100);
    }
   
   };
 
  $scope.start=function(){
    $timeout(sorting,100);
   
  }
		
		$scope.reset();
  
}

/* Styles go here */

.value-line{
  margin-bottom:1px;
  background:green;
  color:white;
  
}