title: AngularJS - using ng-model inside a directive with repeats and dynamic html controls
body: <p>I wrote a directive for a grid and I want to be able to pass in a column definition that may be an html control with a ng-model and ng-click directive.  I keep getting "Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!" and the ng-model isn't binding.  I put together a simple plunker here: <a href="https://plnkr.co/edit/ue1lQqvrUE0M5zZXsg8a?p=preview" rel="nofollow">https://plnkr.co/edit/ue1lQqvrUE0M5zZXsg8a?p=preview</a> as an example.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Code goes here
  
  
  var myApp = angular.module('myApp', ['ngSanitize']);
  
  myApp.controller('MyCtrl', function($scope) {
  
    $scope.myGridConfig = {};
    $scope.myGridConfig.columnDefs = [{
      field: 'facility',
      headerName: 'Facility'
    }, {
      field: 'code',
      headerName: 'Code'
    }, {
      field: 'cost',
      headerName: 'Cost'
    }, {
      field: 'conditionRating',
      headerName: 'Conditional Rating'
    }, {
      field: 'extent',
      headerName: 'Extent'
    }, {
      field: 'planYear',
      headerName: 'Plan Year',
      cellRenderer: function(row, de) {
        return '&lt;input type="checkbox" ng-model="row.selected" /&gt;';
      }
    }];
  
    $scope.myGridConfig.rowCollection = [{
      facility: "Atlanta",
      code: "C-RD34",
      cost: 540000,
      conditionRating: 52,
      extent: 100,
      planYear: 2014
    }, {
      facility: "Seattle",
      code: "CRDm-4",
      cost: 23000,
      conditionRating: 40,
      extent: 88,
      planYear: 2014
    }, {
      facility: "Austin",
      code: "GR-5",
      cost: 1200000,
      conditionRating: 92,
      extent: 90,
      planYear: 2014
    }];
  });
  
  myApp.directive('cellRender', function($compile) {
    var directive = {};
    directive.restrict = 'A';
    directive.scope = {
      cellRender: "="
    }
    directive.replace = true;
    //directive.template = "&lt;div&gt;{{renderThis(cellRender.row, cellRender.def)}}&lt;/div&gt;";
    directive.template = "&lt;div&gt;{{renderThis()}}&lt;/div&gt;";
    directive.link = function(scope, ele, attrs) {
  
  
      scope.renderThis = function() {
        if (scope.cellRender.def.cellRenderer) {
          ele.html(scope.cellRender.def.cellRenderer(scope.cellRender.row, scope.cellRender.def));
          $compile(ele.contents())(scope);
        }
        return scope.cellRender.row[scope.cellRender.def.field];
      };
  
      /*scope.renderThis = function(r, d) {
     if (d.cellRenderer)
     {
      ele.html(d.cellRenderer(r,d));
      $compile(ele.contents())(scope);
     }
     return r[d.field];
    };*/
  
    };
  
    return directive;
  });
  
  myApp.directive('grid', function($compile) {
    var directive = {};
    directive.restrict = 'EA';
    directive.scope = {
      gridConfig: "="
    }
    directive.template = "&lt;table style='border: 1px solid black;'&gt;\n" +
      "&lt;thead&gt;\n" +
      "&lt;tr&gt;\n" +
      "&lt;th ng-repeat=\"def in gridConfig.columnDefs\" &gt;{{def.headerName}}&lt;/th&gt;\n" +
      "&lt;/tr&gt;\n" +
      "&lt;/thead&gt;\n" +
      "&lt;tbody&gt;\n" +
      "&lt;tr ng-repeat=\"row in gridConfig.rowCollection\"&gt;\n" +
      "&lt;td ng-repeat=\"def in gridConfig.columnDefs\" &gt;&lt;div cell-render=\"{'row': row, 'def' :def}\"&gt;&lt;/div&gt;&lt;/td&gt;\n" +
      "&lt;/tr&gt;\n" +
      "&lt;/tbody&gt;\n" +
      "&lt;/table&gt;";
  
    directive.link = function(scope, ele, attrs) {
  
      angular.forEach(scope.gridConfig.rowCollection, function(rr) {
        rr.selected = true;
      });
  
  
    };
    return directive;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
    &lt;title&gt;Test dynamic ngModel&lt;/title&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.29/angular.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.29/angular-sanitize.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="myApp"&gt;
    &lt;div ng-controller="MyCtrl"&gt;
      &lt;div grid="" grid-config="myGridConfig"&gt;&lt;/div&gt;
      &lt;div&gt;Row 2 selected: {{myGridConfig.rowCollection[1].selected}}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>