(function() {
  'use strict';

  var app = angular.module('plunker', ["angular-toArrayFilter", "kendo.directives"]);

  app.controller('MainCtrl', function() {

  });

  app.component('magicTable', {
    templateUrl: 'magicTable.template.html',
    controller: function($element, $timeout) {
      var ctrl = this;

      ctrl.header = {
        4 : {val: 16, enabled:false},
        3 : {val: 8, enabled:false},
        2 : {val: 4, enabled:false},
        1 : {val: 2, enabled:false},
        0 : {val: 1, enabled:false},
      };
      ctrl.data = [
      [26,9,7,6,25],
      [24,10,23,19,15],
      [18,29,6,3,29],
      [28,11,20,22,27],
      [21,14,21,30,13],
      [29,13,22,7,11],
      [27,27,5,23,7],
      [17,15,15,26,21],
      [20,28,28,10,19],
      [19,12,29,15,17],
      [22,24,30,18,9],
      [23,30,14,14,5],
      [30,25,13,11,3],
      [25,26,12,27,23],
      [16,8,4,2,1]
      ];
      ctrl.result = 0;

      
      ctrl.resetInput = function() {
        angular.forEach(ctrl.header, function(header, key) {
          header.enabled = false;
          ctrl.result = 0;
        });
      };
      
      ctrl.updateHeader = function(kendoEvent) {
        for (var i = 0; i < 5; i++){
          ctrl.header[i].binary = (kendoEvent.value >> i) & 1;
          ctrl.header[i].enabled = ctrl.header[i].binary == 1;
        }
        
      };
      
      ctrl.findResult = function() {
        var sum = 0;
        angular.forEach(ctrl.header, function(header, key) {
          if (header.enabled){
            sum = sum + header.val;
          }
        });
        ctrl.result = sum;
      };
      
     
    },
    bindings: {}
  });
})();
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css" />
  <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
  <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
  <script src="//github.hubspot.com/tether/dist/js/tether.js"></script>
  <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.4.9"></script>
  

  <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.ui.core.min.js"></script>
  <script src="app.js"></script>
  <script src="angularjs-toArrayFilter.js"></script>

</head>

<body ng-controller="MainCtrl as ctrl">
  <magic-table></magic-table>
</body>

</html>
/* Put your css in here */



/*.magic
{
  table-layout : auto;
}*/

tr {
   line-height: 10px;
   min-height: 10px;
   height: 10px;
}

.resetButton {
  float: right
}

.findButton {
  float: left
}


.k-slider-horizontal {
  width:100%;
}

<html>

<body>

  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <table class='table table-condensed table-bordered magic'>
          <thead>
            <tr>
              <td ng-repeat="header in $ctrl.header | toArray | orderBy:'-val'">
                <input type="checkbox" ng-model="header.enabled"> 
              </td>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in $ctrl.data">
              <td  ng-repeat="col in row track by $index">
                <div >{{col}}</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="well">
        <div class="col-sm-2">
          <button type="button" class="btn btn-primary" ng-click="$ctrl.findResult()">Find </button>
        </div>
        <div class="col-sm-7">
          <h4 class="text-success" ng-show="$ctrl.result > 0">Number in your mind is: {{$ctrl.result}}</h4>

        </div>
        <div class="col-sm-3">
          <button type="button" class="btn btn-default" ng-click="$ctrl.resetInput()">Reset</button>
        </div>
      </div>
    </div>
   
  </div>

</body>

</html>
angular.module('angular-toArrayFilter', [])

.filter('toArray', function () {
  return function (obj, addKey) {
    if (!(obj instanceof Object)) {
      return obj;
    }

    if ( addKey === false ) {
      return Object.values(obj);
    } else {
      return Object.keys(obj).map(function (key) {
        return Object.defineProperty(obj[key], '$key', { enumerable: false, value: key});
      });
    }
  };
});