Smartadmin, Datatables subelements are not binded (AngularJS)

Question

I bought the smartadmin from (wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0) and use the version 1.5 angular.

I extracted the datatable (wrapbootstrap.com/preview/WB0573SK0) and put it in my own project. So far it works except when I click on the row and the subelement opens, the data there is not binded.

When I check the scope with the Angular Chrome Plugin I can see on your version as well as in my project that the scope has the actual data but somehow the ng-bing is not working. (As you can see on the screenshot)

My Project - empty Subelement http://s14.directupload.net/images/141120/f9xzm3ab.png

What its supposed to be like http://fs1.directupload.net/images/141120/2pp3icxa.png

The View:

<caption class="smart-datatable-child-format" data-child-control="td.details-control">
                  <table cellpadding="5" cellspacing="0" border="0"
                         class="table table-hover table-condensed">
                    <tr>
                      <td style="width:100px">Project Title:</td>
                      <td ng-bind-html="d.name"></td>
                    </tr>
                    <tr>
                      <td>Deadline:</td>
                      <td ng-bind-html="d.ends"></td>
                    </tr>
                    <tr>
                      <td>Extra info:</td>
                      <td>And any further details here (images etc)...</td>
                    </tr>
                    <tr>
                      <td>Comments:</td>
                      <td ng-bind-html="d.comments"></td>
                    </tr>
                    <tr>
                      <td>Action:</td>
                      <td ng-bind-html="d.action"></td>
                    </tr>
                  </table>
                </caption>

Controller:

  $scope.projects = [
{
  "name": "name",
  "est": "est",
  "contacts": "contacts",
  "status": "status",
  "target-actual": "target-actual",
  "actual": "actual",
  "tracker": "tracker",
  "starts": "01-21-2013",
  "ends": "<strong>03-15-2015</strong>",
  "comments": "comments",
  "action": "actions"
}];


$scope.tableOptions = {
"data": $scope.projects,
"iDisplayLength": 15,
"columns": [
  {
    "class": 'details-control',
    "orderable": false,
    "data": null,
    "defaultContent": ''
  },
  {"data": "name"},
  {"data": "est"},
  {"data": "contacts"},
  {"data": "status"},
  {"data": "target-actual"},
  {"data": "starts"},
  {"data": "ends"},
  {"data": "tracker"}
],
"order": [[1, 'asc']]};

directive: (on click handler)

if (attributes.tableOptions) {
    console.log("extending angular tableOptions");
    options = angular.extend(options, scope.tableOptions)
  }

  var _dataTable;

  var childFormat = element.find('.smart-datatable-child-format');
  if (childFormat.length) {
    var childFormatTemplate = childFormat.remove().html();
    element.on('click', childFormat.data('childControl'), function () {
      var tr = $(this).closest('tr');

      var row = _dataTable.row(tr);
      if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      }
      else {
        // Open this row
        var childScope = scope.$new();
        childScope.d = row.data();
        var html = $compile(childFormatTemplate)(childScope);
        row.child(html).show();
        tr.addClass('shown');
      }
    })
  }

  _dataTable = element.DataTable(options);

Any help is much apreciated!

Answer 1

I had to apply the scope in the directive. $compile was not enough.

childScope.$apply(function() {
          childScope.d = row.data();
        });