dtinth/index.html

## index.html
<!DOCTYPE html>
<html ng-app="sort">
<body ng-controller="SortingController">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.1.0/lodash.min.js"></script>
<table border="1">
  <tr ng-repeat="c in data">
    <th>data[{{ $index }}]</th>
    <th>{{ c }}</th>
    <th><div style="width: {{ c * 30 }}px; height: 30px; background: black;"></div></th>
    <th><input type="radio" ng-model="$parent.a" value="{{ $index }}"></th>
    <th><input type="radio" ng-model="$parent.b" value="{{ $index }}"></th>
  </tr>
</table>
<p>
  <button type="button" ng-click="shuffle()">Shuffle</button>
  <button type="button" ng-click="swap()">Swap</button>
  <button type="button" ng-click="insertionSort()">Insertion Sort</button>
</p>
<script>
function swap(array, a, b) {
  var temp = array[a]
  array[a] = array[b]
  array[b] = temp
}
angular.module('sort', []).controller('SortingController', function($scope) {
  $scope.data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
  $scope.shuffle = function() { $scope.data = _.shuffle($scope.data) }
  $scope.swap = function() { swap($scope.data, $scope.a, $scope.b) }

  $scope.insertionSort = function() {
    var data = $scope.data
    var n = data.length
    // do insertion sort
    for (var i = 1; i < n; i ++) {
      var j = i
      while (j > 0 && data[j] < data[j - 1]) {
        swap(data, j, j - 1)
        j = j - 1
      }
    }
  }

})
</script>
	<!DOCTYPE html>
	<html ng-app="sort">
	<body ng-controller="SortingController">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.1.0/lodash.min.js"></script>
	<table border="1">
	<tr ng-repeat="c in data">
	<th>data[{{ $index }}]</th>
	<th>{{ c }}</th>
	<th><div style="width: {{ c * 30 }}px; height: 30px; background: black;"></div></th>
	<th><input type="radio" ng-model="$parent.a" value="{{ $index }}"></th>
	<th><input type="radio" ng-model="$parent.b" value="{{ $index }}"></th>
	</tr>
	</table>
	<p>
	<button type="button" ng-click="shuffle()">Shuffle</button>
	<button type="button" ng-click="swap()">Swap</button>
	<button type="button" ng-click="insertionSort()">Insertion Sort</button>
	</p>
	<script>
	function swap(array, a, b) {
	var temp = array[a]
	array[a] = array[b]
	array[b] = temp
	}
	angular.module('sort', []).controller('SortingController', function($scope) {
	$scope.data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
	$scope.shuffle = function() { $scope.data = _.shuffle($scope.data) }
	$scope.swap = function() { swap($scope.data, $scope.a, $scope.b) }

	$scope.insertionSort = function() {
	var data = $scope.data
	var n = data.length
	// do insertion sort
	for (var i = 1; i < n; i ++) {
	var j = i
	while (j > 0 && data[j] < data[j - 1]) {
	swap(data, j, j - 1)
	j = j - 1
	}
	}
	}

	})
	</script>