title: How do I use ng-grid with Angular HotTowel
body: <p>I am using John Papa's Angular HotTowel and I don't know how to incorporate Angulars ng-grid into the html. Here is what I've added thanks to wonderful help from stondo.  Breeze seems to be adding extra information that is no allowing ng-grid to render the data in the grid. Is there a way to strip the extra info that breeze sends or a work around for ng-grid to behave correctly with breeze data?</p>
  
  <pre><code> angular.module('app').controller(controllerId,
      ['common', 'datacontext','$scope', '$http', grid2]);
  
  function grid2(common, datacontext, $scope, $http) {
   .....
   .....
   } else {
        $http.get('/breeze/Breeze/NoBadgePersonnels').success(function (largeLoad) {
                      $scope.setPagingData(largeLoad, page, pageSize);
                  });
  activate();
  
  function activate() {
       common.activateController([mockData()], controllerId)
           .then(function() { log('Activated Grid View'); });
  
  function mockData() {
       return datacontext.getEmployeePartialsNoBadges().then(function (data) {
            return vm.grid2 = data.results;
       });
     }
   }
  </code></pre>
  
  <p>Additional information </p>
  
  <p>Datacontext.js looks as follows:
      (function () {
      'use strict';</p>
  
  <pre><code>var serviceId = 'datacontext';
  angular.module('app').factory(serviceId,
      ['common', 'config', 'entityManagerFactory', datacontext]);
  
  function datacontext(common, config, emFactory ) {
      var EntityQuery = breeze.EntityQuery;
      var getLogFn = common.logger.getLogFn;
      var log = getLogFn(serviceId);
      var logError = getLogFn(serviceId, 'error');
      var logSuccess = getLogFn(serviceId, 'success');
      var manager = emFactory.newManager();
      var $q = common.$q;
  
      var service = {
          getPeople: getPeople,
          getMessageCount: getMessageCount,
          getEmployeePartials: getEmployeePartials,    
          getEmployeePartialsNoBadges: getEmployeePartialsNoBadges  
      };
  
      var entityNames = {
          personnel: 'Personnel'
      };
      return service;
  
      function getEmployeePartialsNoBadges() {
          var orderBy = 'lname';
          var employees;  //variable to hold employees once we get them back
  
          //use query using Employees resource
          return EntityQuery.from('NoBadgePersonnels')
              .select('id, fname, lname, class, zip, cntySnrDte')
              .orderBy(orderBy)
                  .toType('Personnel')
                  .using(manager).execute()
                  .then(querySucceeded, _queryFailed)
  
          function querySucceeded(data) {
              employees = data.results;
              log('Retrieved [Employee Partials] from remote data source', employees.length, true);
              //log('Retrieved [Employee Partials] from remote data source');
              return employees;
          }
      }
  
  
      function _queryFailed(error) {
          var msg = config.appErrorPrefix + 'Error retrieving data from entityquery' + error.message;
          logError(msg, error);
          throw error;
      }
  </code></pre>
  
  <p>=================================
  It seems like the grid sees 5 items that I queried for, however the items don't want to display on the cells.  Red arrow indicates that it allocated 5 rows, and green arrow indicates that I have selected one of the rows.  Still doesn't display the records.</p>
  
  <p><img src="https://i.stack.imgur.com/OCeBL.png" alt="something is creating rows in the grid, but not displaying info"></p>
  
  <p>thanks
  nick</p>