(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.currentNumber = 30;
    ctrl.header = {
        4 : {val: 16, enabled:false, binary:0},
        3 : {val: 8, enabled:false, binary:0},
        2 : {val: 4, enabled:false, binary:0},
        1 : {val: 2, enabled:false, binary:0},
        0 : {val: 1, enabled:false, binary:0},
      };
      ctrl.data = [[16,8,4,2,1],
      [17,9,5,3,3],
      [18,10,6,6,5],
      [19,11,7,7,7],
      [20,12,12,10,9],
      [21,13,13,11,11],
      [22,14,14,14,13],
      [23,15,15,15,15],
      [24,24,20,18,17],
      [25,25,21,19,19],
      [26,26,22,22,21],
      [27,27,23,23,23],
      [28,28,28,26,25],
      [29,29,29,27,27],
      [30,30,30,30,29]
      ];
      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;
      };
      
      ctrl.findResultDetail = function() {
        var nums = [];
        var sum = 0;
        angular.forEach(ctrl.header, function(header, key) {
          if (header.enabled){
            nums.push(header.val);
            sum = sum + header.val;
          }
        });
        ctrl.result = sum;
        ctrl.resultDetail = nums.join(" + ") + " = " + 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 */


/*.table.magic
{
    width : 70%;
}*/


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-class="header.enabled ? 'bg-primary' : (ctrl.currentNumber >= header.val ? 'bg-info' : '')" ng-repeat="header in $ctrl.header | toArray | orderBy:'-val'">
                <div ng-show="ctrl.currentNumber >= header.val"><input type="checkbox" ng-model="header.enabled"> {{header.binary}}</div>
              </td>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in $ctrl.data">
              <td ng-class="{'bg-success' : col == ctrl.currentNumber}" ng-repeat="col in row track by $index">
                <div ng-show="col <= ctrl.currentNumber ">{{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.findResultDetail()">Find</button>
        </div>
        <div class="col-sm-6">
          <h5 class="text-success" ng-show="$ctrl.result > 0">Number in your mind is: {{$ctrl.resultDetail}}</h5>

        </div>
        <div class="col-sm-4">
          <button type="button" class="btn btn-default" ng-click="$ctrl.resetInput()">Reset</button>
        </div>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-sm-1"></div>
      <div class="col-sm-9">
        <input kendo-slider="" style="width:100%;" k-min="0" k-max="30" k-small-step="1" k-large-step="2" ng-model="ctrl.currentNumber" k-on-change="$ctrl.updateHeader(kendoEvent)" />
      </div>
      <div class="col-sm-2"></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});
      });
    }
  };
});