fix(uiGridCell): re-compile if template changes

As the grid is scrolled horizontally, the column that a cell is bound to
changes, and if the cellTemplate of the new column is different, the cell
needs to be recompiled. Otherwise it will display with the
previous/original cell's
template.

This change watches the column's cellTemplate and re-compiles on-change.
There is perhaps a slight performance hit with different cell templates,
as the cells must be emptied and re-compiled on-scroll, but it's not
excessive.

src/js/core/directives/ui-grid-cell.js

@@ -6,14 +6,24 @@ angular.module('ui.grid').directive('uiGridCell', ['$compile', '$log', '$parse',
     compile: function() {
       return {
         pre: function($scope, $elm, $attrs, uiGridCtrl) {
-          // If the grid controller is present, use it to get the compiled cell template function
-          if (uiGridCtrl) {
+          function compileTemplate() {
             var compiledElementFn = $scope.col.compiledElementFn;
 
+            compiledElementFn($scope, function(clonedElement, scope) {
+              $elm.empty().append(clonedElement);
+            });
+          }
+
+          // If the grid controller is present, use it to get the compiled cell template function
+          if (uiGridCtrl) {
             $scope.getCellValue = uiGridCtrl.getCellValue;
 
-            compiledElementFn($scope, function(clonedElement, scope) {
-              $elm.append(clonedElement);
+            compileTemplate();
+
+            $scope.$watch('col.cellTemplate', function (n, o) {
+              if (n !== o) {
+                compileTemplate();
+              }
             });
           }
           // No controller, compile the element manually