title: Add new column to table using existing values
body: <p>I'm using angularjs and have a table which I build from two scope objects. It would be really nice have some kind of functionality where I can add columns by my self. The big problem is that I would like to use the existing values and try to use them in my new column. Is that possible? Or do I have to build up the columns on the server side and then return it?</p>
  
  <p><a href="http://plnkr.co/edit/XsTNCSXnwOhAlOW33Fk0?p=preview" rel="nofollow">PLUNKER</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;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.id"&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr ng-repeat="row in rows"&gt;
                  &lt;td ng-repeat="column in columnsTest" ng-if="column.checked"&gt;
                      {{ row[column.value] }}
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;br&gt;&lt;br&gt;
    &lt;input type="button" value="Add new column"  ng-click="addColumn()" /&gt;
  
    &lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;p ng-repeat="c in columnsTest"&gt;Column {{$index}}: {{c}}&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var app = angular.module('plunker', []);
  
      app.controller('MainCtrl', function($scope, $filter) {
  
        $scope.addColumn = function() {
          var newCol = { id: 'Value4', checked: true, value: 'Value1 + Value2 + Value3' }
  
          $scope.columnsTest.push(newCol);
        }
  
          $scope.columnsTest = [{
              id: 'Value1',
              checked: true,
              value: 'Value1'
          }, {
              id: 'Value2',
              checked: true,
              value: 'Value2'
          }, {
              id: 'Value3',
              checked: true,
              value: 'Value3'
          }];
  
          $scope.rows = [{
              id: 1,
              "Value1": 911,
              "Value2": 20,
              "Value3": 20
          }, {
              id: 2,
              "Value1": 200,
              "Value2": 20,
              "Value3": 20
          }];
      });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>