title: angularjs , ui-grid : Display information in a basic grid not working
body: <p>I am a newbie in angularjs and ui-grid.
  I am trying to display a basic grid with employee information- id, name, salary, designation, grade.</p>
  
  <p>This is the output of running index.html : 
  <img src="https://i.stack.imgur.com/lDLR4.png" alt="This is the output of index.html. It is returning all the required data but one below the other (sometimes overlapping) and not in a grid format as expected.">
  **app.js : **
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
   
  app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
    $scope.gridOptions1 = {
      enableSorting: true,
      columnDefs: [
        { field: 'eid' },
        { field: 'ename' },
        { field: 'salary' },
        { field: 'designation' },
        { field: 'grade', enableSorting: false }
      ],
      onRegisterApi: function( gridApi ) {
        $scope.grid1Api = gridApi;
      }
    };
    
  scope.gridOptions2 = {
      enableSorting: true,
      onRegisterApi: function( gridApi ) {
        $scope.grid2Api = gridApi;
      },
      columnDefs: [
        {
          field: 'eid',
          sort: {
            direction: uiGridConstants.DESC,
            priority: 1
          }
        },
        {
            field: 'ename',
            sort: {
              direction: uiGridConstants.DESC,
              priority: 0
            }
          },
        {
            field: 'salary',
            sort: {
              direction: uiGridConstants.DESC,
              priority: 2
            }
         },
        { field: 'designation', enableSorting: false },
        {
            field: 'grade',
            sort: {
              direction: uiGridConstants.DESC,
              priority: 3
            }
        }
      ]
    };
   
     $http.defaults.headers.common['Accept'] = "application/json";
   $http.defaults.headers.common['Authorization'] = "Basic dG9tY2F0OnRvbWNhdA==";  
   $http.get('http://localhost:8080/EmployeeManagementSystemAngJS-0.0.1-SNAPSHOT/viewEmployeesPath')
      .success(function(response) {
        $scope.gridOptions1.data = response;
        $scope.gridOptions2.data = response;
      });
  }]);
  
  **main.css : **</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
    width: 500px;
    height: 200px;
  }
  **index.html : **</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html ng-app="app"&gt;
  &lt;head&gt;
  &lt;script
   src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"&gt;&lt;/script&gt;
  &lt;script
   src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"&gt;&lt;/script&gt;
  &lt;script
   src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui-grid.info/docs/grunt-scripts/csv.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"&gt;&lt;/script&gt;
  &lt;script src="ui-grid-stable.js"&gt;&lt;/script&gt;
  &lt;link href="ui-grid-stable.css"&gt;&lt;/link&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div ng-controller="MainCtrl"&gt;
    &lt;br&gt; &lt;br&gt;
    &lt;div id="grid1" ui-grid="gridOptions1" class="grid"&gt;&lt;/div&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;div id="grid2" ui-grid="gridOptions2" class="grid"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Could any one point out where i am going wrong?</p>
  
  <p>I could not find many references to ui-grid. A few links to good content will be very helpful.</p>
  
  <p>I referred to <a href="http://ui-grid.info/docs/#/tutorial/101_intro" rel="nofollow noreferrer">this</a> and <a href="http://ui-grid.info/docs/#/tutorial/102_sorting" rel="nofollow noreferrer">this</a>. Both result in the same output.
  I have added ui-grid-stable.css and ui-grid-stable.js in the project folder itself.</p>