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

app.controller('MainCtrl', function($scope) {
  
  $scope.name = 'World';
  
  
      
      
  $scope.rows = [{
    "BET": 57630343,
    "CUSTOMER": 181645,
    "SPORT": "MLB",
    "XX_FILL OPEN": {
      "element": {
        "element_type": [
          "WAGER_ACTION_BUTTON"
        ],
        "element_call": [
          "fillOpen(57630343)"
        ],
        "element_content": [
          ""
        ]
      }
    },
    "XX_VIEW": null,
    "XX_CANCEL": {
      "element": {
        "element_type": [
          "BASIC_CHECKBOX"
        ],
        "element_call": [
          ""
        ],
        "element_content": [
          "0"
        ]
      }
    }
  },{
    "BET": 57630343,
    "CUSTOMER": 181645,
    "SPORT": "MLB",
    "XX_FILL OPEN": {
      "element": {
        "element_type": [
          "WAGER_ACTION_BUTTON"
        ],
        "element_call": [
          "fillOpen(57630343)"
        ],
        "element_content": [
          ""
        ]
      }
    },
    "XX_VIEW": null,
    "XX_CANCEL": {
      "element": {
        "element_type": [
          "BASIC_CHECKBOX"
        ],
        "element_call": [
          ""
        ],
        "element_content": [
          "0"
        ]
      }
    }
  }];
 
  $scope.arrCols = ["BET","CUSTOMER","SPORT","XX_FILL OPEN","XX_VIEW","XX_CANCEL"];


});
<!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" />
    <script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <div ng-repeat="(key,val) in testItems" ng-switch on="key">
     
     <button ng-switch-when='button'>{{element.name}}</button>
     <input type="checkbox" ng-switch-when='checkbox' />{{key}}
     <span  ng-switch-when='span'>{{element.name}}</span>
     
   </div>
   <h1> switch on col value</h1>
   <table>
        <thead>
          <tr>
            <th ng-repeat="column in arrCols"
                ng-init="isXX = column.indexOf('XX') === 0">
              <span ng-if="isXX">{{column.substring(3).replace('_', ' ')}}</span>
              <span ng-if="!isXX">{{column}}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in rows">
            <td ng-repeat="column in arrCols">
                 <div ng-switch="column">
                <button ng-switch-when="XX_FILL OPEN" >Test Button</button>
                <input  ng-switch-when="XX_CANCEL" type="checkbox" />
                <span ng-switch-default>{{row[column]}}</span>
                </div>

            </td>
          </tr>
        </tbody>
      </table>


   <h1>  switch on element type in row</h1>
   <table>
        <thead>
          <tr>
            <th ng-repeat="column in arrCols"
                ng-init="isXX = column.indexOf('XX') === 0">
              <span ng-if="isXX">{{column.substring(3).replace('_', ' ')}}</span>
              <span ng-if="!isXX">{{column}}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in rows">
            <td ng-repeat="column in arrCols" ng-init="isXX = column.indexOf('XX') === 0">
             <div ng-if="isXX" >
               <span> </span>
                <div ng-switch="row[column].element.element_type[0]">
                  <button ng-switch-when="WAGER_ACTION_BUTTON" >Test Button</button>
                  <input  ng-switch-when="BASIC_CHECKBOX" type="checkbox" />
                </div>
             </div>
             <div ng-if="!isXX" >
                 <span> {{row[column]}}</span>
             </div> 
            </td>
          </tr>
        </tbody>
      </table>
  </body>
</html>
/* Put your css in here */