title: How to render html formatted text in ng-grid column header
body: <p>I have 5 column names in a config file which I read into an array called columns in javascript.</p>
  
  <pre><code>var columns = [];
  var columnNames = [];
  var columnCount = 5;
  $scope.nettingGridOptions = {
          data : 'tableData',
          columnDefs: 'columnNames'
  }
  </code></pre>
  
  <p>Next, I just iterate through the columns array and assign values in <code>columnNames</code> array so that my ng-grid starts showing correct <code>displayName</code>.</p>
  
  <pre><code>for(i=0;i&lt;columnCount;i++)
      {       
          columnNames[i] = { field: i, displayName: columns[i], headerClass : "myPersonalHeaderClass"};
      }
  </code></pre>
  
  <p>The issue I have is that the column names are too big. I want to split a column name (for example "aaaaaaaa bbbbbbbbbb cccccccc" into three rows and display the column name as</p>
  
  <p>aaaaaaaaa<br>
  bbbbbbbbb<br>
  ccccccccc<br></p>
  
  <p>The config file which stores these column names, I have tried to edit that to have a &lt;br&gt; tag whereever I want to split, but <br> tag is not getting interpreted when the page is rendered and I see the column name as aaaaaaaa&lt;br&gt;bbbbbbbbbb&lt;br&gt;cccccccc</p>
  
  <p>I think I have to use <code>headerCellTemplate</code>, but not really sure what shall I do in there to tell it to render the <code>{{col.displayName}}</code> as HTML.</p>
  
  <p>After seeing the answer given by lort (see 1st answer below) - I have tried something, still not working.</p>
  
  <p>Hello,</p>
  
  <p>Thanks Lort, I was trying to use templates as described on <a href="https://github.com/angular-ui/ng-grid/wiki/Templating" rel="nofollow">https://github.com/angular-ui/ng-grid/wiki/Templating</a>.</p>
  
  <p>This is what I did (merged your suggestion of using ng-html-bind with the way the above link is suggesting on updating templates).</p>
  
  <pre><code>var myHeaderCellTemplate = '&lt;div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }"&gt;'+
      '&lt;div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText" ng-bind-html="col.displayName"&gt;&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;';
  
  
      for(i=0;i&lt;columnCount;i++)
      {           
          columnNames[i] = { field: i, displayName: columns[i], headerClass : "myPersonalHeaderClass", headerCellTemplate: myHeaderCellTemplate};
      }
  </code></pre>
  
  <p>When I do this, the column headers go blank !!!! Help!  </p>