controller-$apigeonames

//$apigeonames simple calls the api and return the json data...
 
$scope.grids.api_geo_names.$data(response.geonames); //json data returning from 
//http://api.geonames.org/countryInfoJSON?username=design1online

index.html

<div class="panel-body">
                            <div class="tab-content">
                                <div class="tab-pane active" id="api_geo_names">
                                    <table ng-gridview="api_geo_names" resource="$apigeonames">
                                        <thead>
                                            <tr>
                                                <th data-name="continent" data-width="50">continent</th>
                                                <th data-name="capital" data-width="75">capital</th>
                                                <th data-name="languages" data-width="160">languages</th>
                                                <th data-name="geonameId">geonameId</th>
                                                <th data-name="population">population</th>
                                                <th data-name="countryCode">countryCode</th>
                                                <th data-name="countryName">countryName</th>
                                                <th data-name="continentName">continentName</th>
                                                <th data-name="$options" data-width="160">Options</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
 
                            </div>
                        </div>

ng-griddata-directive

  userApp.directive('ngGriddata',
    function ($parse, $path, $compile, $interpolate, $timeout) {
        
        return {
            restrict: 'AC',
            link: function (scope, elem, attrs) {
                $injector = angular.element('html').injector();
                var id = 'gridview-' + attrs.ngGriddata,
                    saved = id,
                    settings = {
                        'data': scope[attrs.ngModel] || {},
                        'oLanguage': {
                            'sSearch': 'Search: _INPUT_',
                            'sLengthMenu': attrs.title || 'Display _MENU_ items.',
                            'sInfo': 'Showing _START_ to _END_ of _TOTAL_ items.',
                            'sLoadingRecords': 'Please wait - loading...',
                            'sProcessing': '<div class="grid-loading"><img src="../assets/images/spinner.gif" width="32" align="middle" /> Loading</div>',
                            'sInfoEmpty': 'No entries to show'
                        },
                        'iDisplayLength': 10,                        
                        'columnDefs': []
                    };

                var columns = angular.element('thead tr th', elem);

                if (attrs.lengthchange) {
                    settings.bLengthChange = $.parseJSON(attrs.lengthchange);
                }

                if (attrs.remote)
                {
                    var url = $path.rest + attrs.remote;
                    settings.bProcessing = true;
                    settings.bServerSide = true;
                    settings.sAjaxSource = url;

                    if (attrs.resource) {

                        settings.deferRender = true;
                        settings.preDrawCallback = function (settings) {
                            var resource = $injector.get(attrs.resource),
                                collection = angular.fromJson(settings.aoData);
                            angular.forEach(collection, function (item, idx) {
                                collection[idx]._aData = new resource(item._aData);
                            });

                        };
                    }
                };

                $.each(columns, function (index) {

                    var name = $(this).data('name'),
                        column = { 'mData': name || null },
                        render = $(this).data('render'),
                        type = $(this).data('type'),
                        width = $(this).data('width');

                    if (render) {
                        column.mRender = function (value, type, data) {
                            return $interpolate(render)(data);
                        };
                    }

                    if (name && name[0] == '$') {
                        settings.columnDefs.push({
                            "targets": index,
                            "createdCell": function (td, cellData, rowData, row, col) {
                                $(td).empty().append(cellData);
                            }
                        });
                    }

                    if (type) {
                        column.sType = type;
                    }

                    if (width) {
                        column.sWidth = width;
                    }
                    settings.aoColumns.push(column);

                });                 

                elem.$data = function (data) {

                    elem.fnClearTable();
                    angular.forEach(data, function (item, index) {
                        elem.$add(item);
                        if (index + 1 == data.length) {
                            elem.$save = true;
                        }
                    });
                } 

                elem
                  .attr('id', 'gridview-' + attrs.ngGriddata)
                  .attr('width', '100%')
                  .attr('cellspacing', 0)
                  .addClass('table table-striped table-bordered');

                scope.grids[attrs.ngGriddata] = elem.dataTable(settings);

                if (attrs.data) {

                    scope.$watch(attrs.data, function (data) {
                        if (typeof data == 'object') {
                            elem.$save = false;
                            elem.$data(data);
                        }
                    });
                }

            }
        };
    })