title: Create a table from scope object values
body: <p>I have a table which I'm trying to create from a scope-object that I'm creating in my controller.</p>
  
  <p>I would like the headers to take the value from 'rowHeader', which works fine. But the problem is that I wan't my cell values to be taken from 'cellValue' property.</p>
  
  <p>In my fiddle I've added a "Desired table", thats how I would like the results to be in my first approach. If possible..</p>
  
  <p>As you can see I would like to use a filter on one of the columns as well.</p>
  
  <p>The reason that I would like to use this approach is so that I can use the checkboxlist to hide/show columns, and of course so that I can setup my table easy within the controller</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/HB7LU/21469/" rel="nofollow">http://jsfiddle.net/HB7LU/21469/</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker"&gt;
  
  &lt;head&gt;
   &lt;script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div ng:controller="MainCtrl"&gt;
  
  &lt;p&gt;My table&lt;/p&gt;
  &lt;table border="1"&gt;
          &lt;thead style="font-weight: bold;"&gt;
              &lt;tr&gt;
                  &lt;th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.rowHeader"&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr ng-repeat="row in rows" border="1"&gt;
                  &lt;td ng-repeat="column in columns" ng-if="column.checked" ng-bind="row[column.cellValue]"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  &lt;p&gt;Visible Columns:&lt;/p&gt;
  &lt;br /&gt;
  &lt;div class="cbxList" ng-repeat="column in columnsTest"&gt;
    &lt;input type="checkbox" ng-model="column.checked"&gt;{{column.rowHeader}}
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  
  
  &lt;script&gt;
  var app = angular.module('plunker', []);
  
  app.filter('percentage', function () {
  return function (changeFraction) {
      return (changeFraction * 100).toFixed(2) + "%";
  }
  });
  
  
  app.controller('MainCtrl', function($scope) {
    $scope.columnsTest = [
      { checked: true, cellValue: 'ModelName', rowHeader: 'Name' },
      { checked: true, cellValue: 'value1', rowHeader: 'PL' },
      { checked: true, cellValue: 'value1 / value2 | percentage', rowHeader: '+/-' }
    ];
  
    $scope.rows = [
    { value1: 100, value2: 5, ModelName: "This is a cell value" },
    { value1: 15, value2: 5, ModelName: "This is a cell value2" },
    { value1: 38, value2: 2, ModelName: "This is a cell value3" }
    ];
  
    });
    &lt;/script&gt;
   &lt;/body&gt;
  
   &lt;/html&gt;
  </code></pre>