UI-Grid No Data and Loading messages

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$http', '$timeout', function ($http, $timeout) {
  var vm = this;
  
  vm.reset = reset;
  vm.noData = noData;
  vm.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'age' }
    ]
  };
  
  reset();
  
  ////////////
  
  // Initialize our data source
  function init() {
    $http.get('data.json')
      .success(function (data) {
        vm.gridOptions.data = data;
      })
      .finally(function () {
        vm.loading = false;
      });
  }
  
  // Reset the data source in a timeout so we can see the loading message
  function reset() {
    vm.loading = true;
    
    vm.gridOptions.data = [];
    
    $timeout(function () {
      init();
    }, 1000);
  }
  
  function noData() {
    vm.gridOptions.data = [];
  }
}]);

body {
  padding: 10px;
}

.grid {
  width: 100%;
  height: 250px;
}

.grid-msg-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.grid-msg-overlay .msg {
  opacity: 1;
  position: absolute;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 50%;
  background-color: #eee;
  border-radius: 4px;
  border: 1px solid #555;
  text-align: center;
  font-size: 24px;
  display: table;
}

.grid-msg-overlay .msg span {
  display: table-cell;
  vertical-align: middle;
}

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-touch.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl as vm">
      <button type="button" class="btn btn-success" ng-click="vm.reset()">Load Data</button>
      <button type="button" class="btn btn-success" ng-click="vm.noData()">No Data</button>
      <br />
      <br />
      <div id="grid1" ui-grid="vm.gridOptions" class="grid">
        <div class="grid-msg-overlay" ng-show="vm.loading">
          <div class="msg">
            <span>
              Loading Data...
              <i class="fa fa-spinner fa-spin"></i>
            </span>
          </div>
        </div>
        <div class="grid-msg-overlay" ng-hide="vm.loading || vm.gridOptions.data.length">
          <div class="msg">
            <span>No Data</span>
          </div>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>

</html>

[
  {
    "name": "Small Guthrie",
    "age": 20
  },
  {
    "name": "Robert Ashley",
    "age": 53
  },
  {
    "name": "Danielle Powers",
    "age": 56
  },
  {
    "name": "Rosetta Howard",
    "age": 77
  },
  {
    "name": "Ofelia Williamson",
    "age": 60
  },
  {
    "name": "Angelica Grant",
    "age": 21
  },
  {
    "name": "Beasley Bullock",
    "age": 37
  },
  {
    "name": "Mcfadden Kelley",
    "age": 28
  },
  {
    "name": "Conner Cleveland",
    "age": 33
  },
  {
    "name": "Jeannie Foreman",
    "age": 52
  },
  {
    "name": "Langley Clark",
    "age": 37
  },
  {
    "name": "Wood Chan",
    "age": 79
  },
  {
    "name": "Mavis Tate",
    "age": 23
  },
  {
    "name": "Morrison Oneil",
    "age": 68
  },
  {
    "name": "Luella Macdonald",
    "age": 32
  },
  {
    "name": "Bonnie Brennan",
    "age": 73
  },
  {
    "name": "Iris Holloway",
    "age": 79
  },
  {
    "name": "Bridges Stein",
    "age": 53
  },
  {
    "name": "Sanders Ward",
    "age": 34
  },
  {
    "name": "Trevino Parsons",
    "age": 20
  },
  {
    "name": "Hogan Weaver",
    "age": 18
  },
  {
    "name": "Hayes Fitzgerald",
    "age": 51
  },
  {
    "name": "Leonard Bentley",
    "age": 59
  },
  {
    "name": "Pace Pratt",
    "age": 42
  },
  {
    "name": "Clarke Page",
    "age": 77
  },
  {
    "name": "Carolina Rosa",
    "age": 44
  },
  {
    "name": "Kasey Blair",
    "age": 21
  },
  {
    "name": "Farrell Beasley",
    "age": 28
  },
  {
    "name": "Sellers Kemp",
    "age": 52
  },
  {
    "name": "Winifred Fulton",
    "age": 48
  }
]