niquola/app.css

## app.css
.progress {
  border: 1px solid #ddd;
  width: 100px;
  height: 10px;
}
.progress .bar {
  background-color: #aae;
  width: 10px;
  height: 10px;
}

## app.html
<html>
  <head>
    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script src="app.js"></script>
    <style>
      @import url("app.css");
    </style>
  </head>
  <body>
    <div ng-app="app">
      <table ng-controller="MyCnt">
        <tr ng-repeat="proc in processes">
          <td>{{proc.name}}</td>
          <td><div progress="proc.status"></div></td>
          <td><button ng-disabled="proc.status > 50" ng-click="reset(proc)"> Stop </button>
        </tr>
      </table>
    </div>
  </body>
</html>

## app.js
angular.module('wg', [])
.directive('progress', function () {
  //progress widget
  return {
    template: '<div class="progress">'
    + '<div class="bar" ng-style="style"></div>'
    + '</div>',
    link: function ($scope, element, attrs) {
      $scope.style = { width: 0 };
      $scope.$watch(attrs.progress, function(val) {
        $scope.style.width = val;
      });
    }
  };
});

angular.module('app', ['wg'])
  .factory('channel', function ($timeout) {
    //just stub for channel
    var listener = null;
    var status = 0;
    $timeout(function tick() {
      status = status + Math.random()
      if (status > 99) {
        status = 0
      }
      listener && listener(Math.floor((Math.random() / 0.3)), status);
      $timeout(tick, 100);
    }, 100);

    return function (listen) {
      listener = listen;
    }
  })

DATA = [{
  id: 0,
  name: 'erlang',
  status: 30
}, {
  id: 1,
  name: 'ruby',
  status: 80
}, {
  id: 2,
  name: 'clojure',
  status: 10
}];


function MyCnt($scope, channel) {
  $scope.reset = function (proc) {
    proc.status = 0;
  }
  $scope.processes = DATA;
  channel(function (proc_id, status) {
    $scope.processes.forEach(function (proc) {
      if (proc_id == proc.id) {
        proc.status = status;
      }
    });
  });
}
	.progress {
	border: 1px solid #ddd;
	width: 100px;
	height: 10px;
	}
	.progress .bar {
	background-color: #aae;
	width: 10px;
	height: 10px;
	}
	<html>
	<head>
	<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
	<script src="app.js"></script>
	<style>
	@import url("app.css");
	</style>
	</head>
	<body>
	<div ng-app="app">
	<table ng-controller="MyCnt">
	<tr ng-repeat="proc in processes">
	<td>{{proc.name}}</td>
	<td><div progress="proc.status"></div></td>
	<td><button ng-disabled="proc.status > 50" ng-click="reset(proc)"> Stop </button>
	</tr>
	</table>
	</div>
	</body>
	</html>
	angular.module('wg', [])
	.directive('progress', function () {
	//progress widget
	return {
	template: '<div class="progress">'
	+ '<div class="bar" ng-style="style"></div>'
	+ '</div>',
	link: function ($scope, element, attrs) {
	$scope.style = { width: 0 };
	$scope.$watch(attrs.progress, function(val) {
	$scope.style.width = val;
	});
	}
	};
	});

	angular.module('app', ['wg'])
	.factory('channel', function ($timeout) {
	//just stub for channel
	var listener = null;
	var status = 0;
	$timeout(function tick() {
	status = status + Math.random()
	if (status > 99) {
	status = 0
	}
	listener && listener(Math.floor((Math.random() / 0.3)), status);
	$timeout(tick, 100);
	}, 100);

	return function (listen) {
	listener = listen;
	}
	})

	DATA = [{
	id: 0,
	name: 'erlang',
	status: 30
	}, {
	id: 1,
	name: 'ruby',
	status: 80
	}, {
	id: 2,
	name: 'clojure',
	status: 10
	}];


	function MyCnt($scope, channel) {
	$scope.reset = function (proc) {
	proc.status = 0;
	}
	$scope.processes = DATA;
	channel(function (proc_id, status) {
	$scope.processes.forEach(function (proc) {
	if (proc_id == proc.id) {
	proc.status = status;
	}
	});
	});
	}