AngularJS 1.5.x Place the mouse over the First Name column. You will see the title as '{{col.headerTooltip(col) }}' rather than 'Header: First Name'

var app = angular.module('apps', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap', 'ui.grid']);

app.controller('MainCtrl', function($scope) {});

'use strict';

angular.module('apps')

.config(function($interpolateProvider) {
    // comment out the next 2 lies to show it workng.
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  })
  .controller('HeaderTooltipDemoCtrl', function($scope, $q, $sce) {
    $scope.gridOptions = {
      enableSorting: false,
      columnDefs: [{
        name: 'firstName',
        field: 'first-name',
        headerTooltip: function(col) {
          return 'Header: ' + col.displayName;
        },
      }, {
        name: '1stFriend',
        field: 'friend',
      }, ],
    };


  });

<!DOCTYPE html>
<html ng-app="apps">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    
    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.4/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="style.css" />
    <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>
    <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-animate.min.js" data-semver="1.4.5"></script>
    <script src="//cdn.jsdelivr.net/angularjs/1.4.5/angular-sanitize.min.js" data-semver="1.4.5"></script>
    <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.4"></script>
    <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.4"></script>
    <script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.4"></script>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.0.7/ui-grid.css" type="text/css">
    
    
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

<div ng-controller="HeaderTooltipDemoCtrl">

 <div id="grid1" ui-grid="gridOptions" class="grid">
 </div>
 
  </div>

  


  </body>

</html>

/* Put your css in here */

body {
  padding: 40px !important;
}