title: Angular ng-grid pinned header not static on first page load
body: <p>Whn I initially load the page with my ng-grid and then resize the grid columns so that I need to scroll horizontally to see all of them, the first column doesn't stay static. Once I refresh the page, the grid loads column settings from localstorage and then the first col stays static. I'm using a custom headerCellTemplate, and I have enablePinning: true, and first column pinned: true already set up. I'm trying to figure out how to get the first column to stay static on the initial page load.</p>
  
  <p>Code:</p>
  
  <pre><code>var headerTemplate = '&lt;div class="ngHeaderSortColumn test" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }"&gt;'
  + '&lt;div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText"  popover-append-to-body="true" popover-trigger="mouseenter"'
  + 'popover="{{getTooltip(col.displayName)}}"&gt;'
  + '{{col.displayName}}&lt;/div&gt;    &lt;div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"&gt;&lt;/div&gt;'
  + '&lt;div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"&gt;&lt;/div&gt;'
  + '&lt;div class="ngSortPriority"&gt;{{col.sortPriority}}&lt;/div&gt;'
  + '&lt;div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"&gt;&lt;/div&gt;&lt;/div&gt;'
  + '&lt;div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"&gt;&lt;/div&gt;';
  
  var adverseEvent = {
      field: 'event_label',
      width: '28%',
      pinned: true,
      visible: true,
      displayName: 'Adverse Event',
      headerCellTemplate: headerTemplate,
      cellTemplate: '&lt;div class="ngCellText pull-left"&gt;{{row.getProperty(col.field) }}&lt;/div&gt;'
  };
  </code></pre>
  
  <p>...more columns below, not relevant</p>
  
  <p>Function that sets gridColumns:</p>
  
  <pre><code>function getCustomGridColumns(stateName) {
      var storageId = stateName + exports.GRID_STORAGE_ID;
      var gridColumns = localStorageService.get(storageId);
      if (!gridColumns) {
          gridColumns = getDrugCostColumnDefinition();
          localStorageService.set(storageId, angular.toJson(gridColumns));
      }
      return gridColumns;
  }
  </code></pre>
  
  <p>Get grid columns</p>
  
  <pre><code>function getDefaultGridOptions() {
      return {
          data: 'gridNumbers',
          enableSorting: true,
          enableColumnResize: true,
          showGroupPanel: true,
          enableCellGrouping: true,
          showColumnMenu: true,
          enablePinning: true,
          showFilter: true,
          jqueryUITheme: true,
          columnDefs: 'headers',
          sortInfo:{fields:['metric_sum_event_cost'], directions:['desc']},
          plugins: [new ngGridFlexibleHeightPlugin({"maxHeight": 500}), new ngGridCsvExportPlugin()],
          showFooter: true,
          footerTemplate: 'app/common/partials/footer-template.html',
          footerRowHeight: 43
      }
  };
  
  
  // watch when any column settings changed from grid settings and saved into localstorage
  $scope.$watch('drugCostGridOptions.$gridScope.columns', functionChangeGrid, true);
  
  // callback for watchers
  function functionChangeGrid(newVal, oldVal) {
      var config = [];
      angular.forEach(newVal, function (col) {
          config.push(_.pick(col, 'field', 'displayName', 'width', 'visible', 'headerCellTemplate', 'cellFilter', 'cellTemplate', 'pinned'));
      });
      drugCostsService.setCustomGridColumns(currentState, config);
  }
  </code></pre>