<script type="text/javascript" src="bower_components/angular-datatable/datatable.js"></script>

<div ng-controller="DemoCtrl">
    <ui-data-table url="/user/list">
        <ui-data-table-column head="I'm Title1" name="test"></ui-data-table-column>
        <ui-data-table-column head="I'm Title2" name="test2"></ui-data-table-column>
        <ui-data-table-column head="I'm Title3" name="test3"></ui-data-table-column>
        <ui-data-table-column head="I'm Title4" name="test4"></ui-data-table-column>
    </ui-data-table>
</div>

<script type="text/javascript">
    angular.module('demo', ['dataTable'])

            //set custome dataTableConfig
            .config(function(uiDataTableFactoryProvider){
                uiDataTableFactoryProvider.setConfig({
                });
            })

            //demo here
            .controller('DemoCtrl', function ($scope) {
                $scope.renderTest2 = function(rowData){
                    return $('<span></span>').html('this is a demo' + rowData.test2).css('color', 'red');
                }

                $scope.renderTest3 = function(rowData){
                    return rowData.test;
                }
            });
</script>