angularjs - Angular-grid when using $http to load json data

I am using ag-grid plugin in a project. I get json data using $http service. But the grid shows blank in web page. But when json data is applied directly, grid works. I think this is probably due to delay in getting the data from $http. But as per angular concept, the grid should be updated when data comes. Is there any solution to show the html page only when data comes from the server.

Below is my javascript file 'fileBrowser.js':

var fileBrowserModule = angular.module('fileBrowser', ['agGrid']);

fileBrowserModule.controller('fileBrowserController', function($scope, $http) {


    .success(function(data) {



    var columnDefs = [
        {headerName: "Name", field: "name", width: 250,
            cellRenderer: {
                renderer: 'group',
                innerRenderer: innerCellRenderer
        {headerName: "Size", field: "size", width: 70, cellStyle: sizeCellStyle},
        {headerName: "Type", field: "type", width: 150},
        {headerName: "Date Modified", field: "dateModified", width: 150}

    $scope.gridOptions = {
        columnDefs: columnDefs,
        rowData: $scope.rowData,
        rowSelection: 'multiple',
        rowsAlreadyGrouped: true,
        enableColResize: true,
        enableSorting: true,
        rowHeight: 20,
        icons: {
            groupExpanded: '<i class="fa fa-minus-square-o"/>',
            groupContracted: '<i class="fa fa-plus-square-o"/>'
        onRowClicked: rowClicked

    $scope.selectedFile = 'Select a file below...';

    function rowClicked(params) {
        var node = params.node;
        var path =;
        while (node.parent) {
            node = node.parent;
            path = + '\\' + path;
        $scope.selectedFile = path;

    function sizeCellStyle() {
        return {'text-align': 'right'};

    function innerCellRenderer(params) {
        var image;
        if ( {
            image = params.node.level === 0 ? 'disk' : 'folder';
        } else {
            image = 'file';
        var imageFullUrl = '/example-file-browser/' + image + '.png';
        return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" /> ' +;


Below is my html file:

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <link href="//" rel="stylesheet">
    <link href="styles/angular/fileBrowser.css" rel="stylesheet">

    <script src=""></script>
    <script src=""></script>
  <!--   <script src=""></script>
     <script src=""></script>

    <!-- you don't need ignore=notused in your code, this is just here to trick the cache -->
    <script src="scripts/angular/ag-grid.js?ignore=notused10"></script>
    <link rel="stylesheet" type="text/css" href="styles/angular/ag-grid.css?ignore=notused10">
    <link rel="stylesheet" type="text/css" href="styles/angular/theme-fresh.css?ignore=notused10">

    <script src="scripts/angular/fileBrowser.js"></script>


<body ng-app="fileBrowser">

    <div ng-controller="fileBrowserController"
         style="border: 1px solid darkgrey;
                width: 600px;
                background-color: lightgrey;
                border-radius: 5px;
                padding: 3px;">
        <div style="border: 1px solid darkgrey; margin-bottom: 2px; background-color: white;"> &nbsp; {{selectedFile}}</div>
        <div style="width: 100%; height: 400px;"



2 Answers

  1. Brent- Reply


    I have modified previous answer. Instead of setRows we can use setRowData. This works for me:


Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>