Angular Seed

HTML

<div ng-app="app" ng-controller="AppCtrl">
    {{test}}
    
    <choose-columns-left columns="dataColumns"></choose-columns-left>
    
      <!--ul><li ng-repeat="column in dataColumns.columns track by $index">{{column}}</li></ul-->
      <h1>
      -----------------------------
      </h1>
    
    
    <choose-columns-right columns="dataColumns"></choose-columns-right>
    
    <h2>updated : {{selectedColumnValues}}</h2>
    
    <table>
      <tr>  
         <th ng-repeat="column in dataColumns.selectedColumns">
            {{column}}
            <select-values col-name={{column}} values="values[column]" selected-values="selectedColumnValues"></select-values>
         </th>
      </tr>
      <tr>  
         <td ng-repeat="value in selectedColumnValues track by $index">
            {{value}}
         </td>
      </tr>
     
    </table>
    
    
    
    
</div>

CSS

body {
    font-family:'Arial', sans-serif;
}

JavaScript

angular.module('app', [])
.controller('AppCtrl', function ($scope) {
    $scope.test = 'Hello World!!';
    
    //$scope.columns = ["Name", "Place", "Location"];
    
    $scope.dataColumns = {
         columns : ["Name", "Place", "Location"],
         selectedColumns : []
    }
    
    $scope.values = {
       "Name" : ["Amazon", "Google", "Apple", "Verizon"],
       "Place" : ["Amazon", "Google", "Apple", "Verizon"],
       "Location" : ["Amazon", "Google", "Apple", "Verizon"],
    }
    
    $scope.selectedColumnValues = [];
    
    
    
    //$scope.selectedColumns = ["Abcd"];
    
}).directive("chooseColumnsLeft", function(){
	
  return {
  	
    restrict : "E",
    scope : {
       columns : "=",
    },
    template : '<ul><li ng-repeat="column in columns.columns track by $index" ng-click="select($index)">{{column}}</li></ul>',
    link : function(scope, element, attr, ctrl){
       scope.select = function(index){
       
					console.log(scope.dataColumns);
          var columnsSelected = scope.columns.columns.splice(index, 1);
          scope.columns.selectedColumns.push(columnsSelected.toString());
          
          
       }
    },
   
    
  }
  
}).directive("chooseColumnsRight", function(){
	
  return {
  	
    restrict : "E",
    scope : {
       columns : "=",
    },
    template : '<ul><li ng-repeat="column in columns.selectedColumns track by $index" ng-click="select($index)">{{column}}</li></ul>',
    link : function(scope, element, attr, ctrl){
       scope.select = function(index){
       
					console.log(scope.dataColumns);
          var columnsSelected = scope.columns.selectedColumns.splice(index, 1);
          scope.columns.columns.push(columnsSelected.toString());
          
          
       }
    },
   
    
  }
  
}).directive("selectValues", function(){
	
  return {
  	
    restrict : "E",
    scope : {
       values : "=",
       selectedValues : "=",
       colName : "@"
    },
    template : '<div id={{colName}}><ul><li...