/jsbin.ginavogo.css

## jsbin.ginavogo.css


input { display:none; }
input:checked ~ label  { /* color:#fff; */ /* background-color:#7790F7;  */
padding: 20px 10px 20px 80px; background-image:url("http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png");
background-repeat:no-repeat; background-size:30px;
background-position: 20px center;

}


label { width:100%; padding: 20px 10px 20px 80px; background-image:url("http://png-2.findicons.com/files/icons/2652/gentleface/48/checkbox_unchecked_icon.png");
background-repeat:no-repeat; background-size:30px;
background-position: 20px center;
font-size: 2em; text-transform:uppercase;
}


.total h1 {text-transform:uppercase;  }


## jsbin.ginavogo.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta name="description" content="" />
  <meta charset="utf-8">
  <title>Cost Estimator</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" ></script>
    <script type="text/javascript" src="http://vitalets.github.io/checklist-model/checklist-model.js" ></script>
</head>
<body>
  <div class"container">
  <div ng-app="app" ng-controller="Ctrl" class="col-md-12
">

    <div class="page-header">
      <h1>Estimator <small>Estimate your Quote</small></h1>
    </div>

    <div ng-repeat="role in roles" >


      <div class="list-group-item">
      <input type="button" checklist-model="user.roles"
      checklist-value="role.id"  id="{{role.id}}"
      name="{{role.id}}" ng-checked="totalAll()">
     <label  ng-class="{red: selected}" for="{{role.id}}"> {{role.text}} | {{role.cost}}
    </label>
     </div>


    </div>


    <br><!--
    <button ng-click="checkAll()">check all</button>
    <button ng-click="uncheckAll()">uncheck all</button>
    <button ng-click="checkFirst()">check first</button>
    <button ng-click="totalAll()">total</button>
    <br><br>-->

    <div class="total"><h1>Total : {{ total }} USD</h1></div><br>

  </div>

  </div>
</body>
</html>

## jsbin.ginavogo.js
var app = angular.module("app", ["checklist-model"]);

app.controller('Ctrl', function($scope) {
$scope.roles = [
    {id: 1, text: 'Drupal', cost: 200},
    {id: 2, text: 'Branding', cost: 300},
    {id: 3, text: 'Front End', cost: 500},
    {id: 4, text: 'Responsive', cost: 600}
  ];

  $scope.user = {
    roles: []
  };


  $scope.checkAll = function() {
    $scope.user.roles = $scope.roles.map(function(item) { return item.id; });
        $scope.totalAll();
  };

  $scope.uncheckAll = function() {
    $scope.user.roles = [];
    $scope.totalAll();
  };

  $scope.checkFirst = function() {
    $scope.user.roles.splice(0,  $scope.user.roles.length);
    $scope.user.roles.push(1);
        $scope.totalAll();

//     var source = $scope.roles;
//     var result = $scope.findById( $scope.roles, 1 );

//     console.log(result.cost);

  };

  $scope.totalAll = function() {

    //get all the values
    var source = $scope.roles;
    $scope.total = 0;
    $scope.user.roles.map(function(item) {

      //get the id
      var itemid = item;

      var result = $scope.findById(source, itemid);

      //console.log('Service: '+result.text);
      //console.log('Cost: ' + result.cost);
      $scope.total +=result.cost;


    });


  };


   $scope.findById = function(source, id) {

        return source.filter(function( obj ) {
        // coerce both obj.id and id to numbers
        // for val & type comparison
        return +obj.id === +id;
        })[ 0 ];
  };


});


	input { display:none; }
	input:checked ~ label { /* color:#fff; / / background-color:#7790F7; */
	padding: 20px 10px 20px 80px; background-image:url("http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png");
	background-repeat:no-repeat; background-size:30px;
	background-position: 20px center;

	}


	label { width:100%; padding: 20px 10px 20px 80px; background-image:url("http://png-2.findicons.com/files/icons/2652/gentleface/48/checkbox_unchecked_icon.png");
	background-repeat:no-repeat; background-size:30px;
	background-position: 20px center;
	font-size: 2em; text-transform:uppercase;
	}



	.total h1 {text-transform:uppercase; }
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<meta name="description" content="" />
	<meta charset="utf-8">
	<title>Cost Estimator</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" ></script>
	<script type="text/javascript" src="http://vitalets.github.io/checklist-model/checklist-model.js" ></script>
	</head>
	<body>
	<div class"container">
	<div ng-app="app" ng-controller="Ctrl" class="col-md-12
	">

	<div class="page-header">
	<h1>Estimator <small>Estimate your Quote</small></h1>
	</div>

	<div ng-repeat="role in roles" >



	<div class="list-group-item">
	<input type="button" checklist-model="user.roles"
	checklist-value="role.id" id="{{role.id}}"
	name="{{role.id}}" ng-checked="totalAll()">
	<label ng-class="{red: selected}" for="{{role.id}}"> {{role.text}} \| {{role.cost}}
	</label>
	</div>




	</div>


	<br><!--
	<button ng-click="checkAll()">check all</button>
	<button ng-click="uncheckAll()">uncheck all</button>
	<button ng-click="checkFirst()">check first</button>
	<button ng-click="totalAll()">total</button>
	<br><br>-->

	<div class="total"><h1>Total : {{ total }} USD</h1></div><br>

	</div>

	</div>
	</body>
	</html>
	var app = angular.module("app", ["checklist-model"]);

	app.controller('Ctrl', function($scope) {
	$scope.roles = [
	{id: 1, text: 'Drupal', cost: 200},
	{id: 2, text: 'Branding', cost: 300},
	{id: 3, text: 'Front End', cost: 500},
	{id: 4, text: 'Responsive', cost: 600}
	];

	$scope.user = {
	roles: []
	};




	$scope.checkAll = function() {
	$scope.user.roles = $scope.roles.map(function(item) { return item.id; });
	$scope.totalAll();
	};

	$scope.uncheckAll = function() {
	$scope.user.roles = [];
	$scope.totalAll();
	};

	$scope.checkFirst = function() {
	$scope.user.roles.splice(0, $scope.user.roles.length);
	$scope.user.roles.push(1);
	$scope.totalAll();

	// var source = $scope.roles;
	// var result = $scope.findById( $scope.roles, 1 );

	// console.log(result.cost);

	};

	$scope.totalAll = function() {

	//get all the values
	var source = $scope.roles;
	$scope.total = 0;
	$scope.user.roles.map(function(item) {

	//get the id
	var itemid = item;

	var result = $scope.findById(source, itemid);

	//console.log('Service: '+result.text);
	//console.log('Cost: ' + result.cost);
	$scope.total +=result.cost;



	});


	};



	$scope.findById = function(source, id) {

	return source.filter(function( obj ) {
	// coerce both obj.id and id to numbers
	// for val & type comparison
	return +obj.id === +id;
	})[ 0 ];
	};






	});