AngularJS Example:

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="myapp">
				<div ng-controller='controller'>
					<input type='text' ng-model='myvar '><button ng-click="add(myvar)">Add</button><br><br>
					<table border=1 style="background-color:cornflowerblue;color:white">
									<tr>
               							 <th>Item</th>
                						<th>Done</th>
                						
									</tr>
									<tr ng-repeat="task in tasks">
										 <td>{{task.item}}</td>
                						<td><input type='checkbox' ng-model="task.status"></td>
									</tr>
					</table>
					<p ng-hide="count()==tasks.length">Remaining pending:{{count()}}</p>
					<p ng-show="count()==tasks.length">All tasks are done</p>
					
			</div>
				</div>

JavaScript

var app=angular.module("myapp",["ngSantize"]);
			app.controller("controller",['$scope',function($scope)
			{
				$scope.tasks=[{
							item:"Shopping",
							status:true
				},
							  {
								  item:"Cleaning",
								  status:false
							  }
				];
				$scope.count=function()
				{
					
					var cnt=0;
					angular.forEach($scope.tasks,function(t)
					{
						if(t.status==false)
						{
							cnt=cnt+1;
						}
					});
					return cnt;
				}
				$scope.add=function(myvar)
				{
                    $scope.tasks.push({item:myvar,status:false});
				}
		}]);