ng-count checked

http://angularjs.org/

by mckennatim

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <ul class="gotten unstyled" >
        {{cnt}}
      <li ng-repeat="got in list">
        <input type="checkbox" ng-model="got.done">  
        <span class="done-{{got.done}}">{{got.item}}</span>
      </li>
    </ul> 
</div>

CSS

.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

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

//myApp.directive('myDirective', function() {});
myApp.factory('myService', function() {
   return [
    {id:'26', item:'banana', done:false},
    {id:'26',item:'coffee', done:false},
    {id:'26',item:'brown sugar', done:false},
    {id:'26',item:'bacon', done:false},
    {id:'26',item:'apples', done:true},
    {id:'26',item:'brown gravy', done:true},
    {id:'26',item:'bags', done:true},
    {id:'26',item:'applesauce', done:true},
    {id:'26',item:'sugar', done:true},
    {id:'26',item:'baby back ribs', done:true},
    {id:'26',item:'apple butter', done:true}
  ];
});

function MyCtrl($scope, myService, $filter) {
    var list = $scope.list = myService;
    $scope.$watch('list', function(newValue, oldValue){
        $scope.cnt = $filter('filter')(list, {done:true}).length;
    }, true);  
}