title: populating ui-grid with asp.net web api
body: <p>This is how my piece of code looks like - </p>
  
  <pre><code>   var frameworkModule = angular.module('frameworkModule',
        ['ngRoute', 'ngGrid']); 
  
     frameworkModule.controller('homeController', 
          ['$scope', 'valuesService', '$http', 
          function ($scope, valuesService, $http) {
  
      getData1();
      getData2();
  
      function getData1() {
          $scope.myData1 = [{ name: "Moroni", age: 50 },
                           { name: "Tiancum", age: 43 },
                           { name: "Jacob", age: 27 },
                           { name: "Nephi", age: 29 },
                           { name: "Enos", age: 34 }];
          $scope.gridOptions1 = { data: 'myData1' };
      }
  
      function getData2() {
          $http.get('/api/values').success(function (gridData) {
              $scope.myData2 = [{ name: "Moroni", age: 50 },
                           { name: "Tiancum", age: 43 },
                           { name: "Jacob", age: 27 },
                           { name: "Nephi", age: 29 },
                           { name: "Enos", age: 34 }];
              $scope.gridOptions2 = { data: 'myData2' };
          });
      }
  }]);
  </code></pre>
  
  <p>Please note that the <code>frameworkModule</code> and <code>homeController</code> directives are specified correctly in my html.
  This is how my grid html looks like- </p>
  
  <pre><code>&lt;div class="gridStyle" data-ng-grid="gridOptions1"&gt;
  &lt;div class="gridStyle" data-ng-grid="gridOptions2"&gt;
  </code></pre>
  
  <p>Now my issue is that the data in <code>gridOptions1</code> is displaying as expected, but the data in  <code>gridOptions2</code> does not display at all. </p>
  
  <p>The piece of code in <code>$http</code> call is just a sample to show what i intend to do. Once my <code>gridOptions2</code> grid is working i will show data that is returned from <code>/api/values</code> call in <code>gridData</code>parameter. Also note that my web api <code>/api/values</code> is called correctly and it returns the json data for grid as expected. </p>
  
  <p>Can anybody please help me understand what is the difference between <code>getData1</code> and <code>getData2</code> and why my code in <code>getData2</code> does not work as expected?</p>
  
  <p>Thanks</p>