<html>
<head>
     <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
     <style type="text/css">
          .gridHeight {
               height: 30px;
          }
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
     <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
     <script>
          var app = angular.module('uigridApp', ['ui.grid', 'ui.grid.selection', 'ui.grid.exporter']);
          app.controller("uigridCtrl", function($scope, $http) {
               $scope.getJSONData = function() {
                    $http.get('JSONdata.json')
                         .success(function(data) {
                              $scope.users = data;
                         });
               };

               $scope.uiGridOptions = {
                    data: 'users',
                    columnDefs: [{
                         field: 'name'
                    }, {
                         field: 'gender',
                    }, {
                         field: 'company'
                    }]
               };

               $scope.users = {
                    "data": []
               };

               $scope.Clear = function() {
                    $scope.users = {
                         "data": []
                    }
               };
          });
     </script>
</head>
<body ng-app="uigridApp">
     <div ng-controller="uigridCtrl">
          <h1>In Angular UI Grid, Display No Records Found </h1>
          <div>
               <input type="button" style="color:red;" value="Click to Get Users" ng-click="getJSONData()" />
               <input type="button" style="color:red;" value="Clear Users" ng-click="Clear()" />
          </div>
          <h3>User List</h3>
          <div ui-grid="uiGridOptions" ui-grid-selection class="gridHeight">
               <div ng-if="users.data.length==0">
                    <span style="color:red;">No Records Found.</span>
               </div>
          </div>
     </div>
</body>
</html>
// Code goes here

/* Styles go here */

[
    {
        "name": "Anil Singh",
        "gender": "Male",
        "company": "code-sample.com"
    },
    {
        "name": "Sunil",
        "gender": "Male",
        "company": "HCL"
    },
    {
        "name": "Reena",
        "gender": "female",
        "company": "Angularu.com"
    }
]