AngularJS Dynamic Table

Trying to create a dynamic table in AngularJS with detailed column definitions.

by markokristian

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <br>
    <div ng-controller="foo">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="alert alert-warning alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" 
                            aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4>Debug Info:</h4>
                        <p>Sort Field: {{ sortField.obj.value }}</p>
                        <p>Sort Reverse: {{ sortReverse.obj.value }}</p>
                        <p>Search Term: {{ searchTerm.obj.value }}</p>
                    </div>
                    <form>
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-search"></i></div>
                            <input type="text" class="form-control" placeholder="Search..." ng-model="searchTerm.obj.value">
                          </div>      
                        </div>
                    </form>
                    <table class="table table-hover table-striped table-bordered table-responsive table-condensed">
                        <thead>
                            <tr>
                                <th ng-repeat="col in playerColumns">
                      ...

JavaScript

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

myApp.service('mySvc', ['$location', function($location) {

    this.getPlayerColumns = function(colName) {
			return [];
    };

    this.getPlayerData = function() {
        return [];
    };
}]);

myApp.controller('foo', ['$scope', 'mySvc', function($scope, mySvc) {
	
  console.log(mySvc);

    $scope.sortField = Object.create({obj: {value: 'FullName'}});
    $scope.sortReverse = Object.create({obj: {value: false}});
    $scope.searchTerm = Object.create({obj: {value: ''}});
    $scope.playerColumns = mySvc.getPlayerColumns();
    $scope.playerData = mySvc.getPlayerData();

    console.log('cols', $scope.playerColumns);
    console.log('data', $scope.playerData);
}]);