数据在控制台中打印，分配给$scope但不以 HTML 打印

更新

问题：让我尝试用一两行来解释我想要什么，在演示 1 中，当我单击"编辑"按钮时，我使用了 Angular 数据表，数据不会出现在编辑形式中，而在演示 2 中我没有使用任何数据表，但数据清楚地以编辑形式出现，我希望数据使用数据表出现在演示 1 中。数据在 $scope.update 中，但由于某些原因它没有出现在 HTML 中，而使用相同的 HTML 它在没有数据表的情况下完美运行。

演示1：http://plnkr.co/edit/EXXbkPUHfxcZ3blzvMaz?p=preview

演示2：http://plnkr.co/edit/QYZzmJNwWTQaIgvUkRzQ?p=preview

背景

最初在左侧，数据是从包含一种输入类型和一种选择（殖民地类型）的表单中插入的，有两种表单插入，左侧的更新表单一个用于插入，一个用于编辑，当插入表单可见时，编辑表单被隐藏，反之亦然， 在右侧，数据列表在数据表的帮助下显示，以及"编辑"和"删除"按钮，重要的是按钮是在数据表代码内部制作的，而不是在HTML页面上制作的，现在删除和插入工作绝对正常，但是编辑！不，它没有。

问题

情况 1：（当我使用数据表时）当单击"编辑"按钮（在数据表中编码）时，将发送一个 ID，在下图中，ID 被控制台为"47"，然后发出一个$http请求，该请求带来了数据并打印在控制台中。但是当我尝试将值注入回更新表单时，它不起作用，尽管当我控制台$scope时，这些值被注入到更新对象中，但不在 HTML 页面上打印。

情况 2：（当我不使用数据表时）如果我不使用数据表并单击"编辑"按钮，则一切正常，数据将注入更新对象并打印在HTML页面上。

网页：

如果使用数据表

<!-- IF DataTables are Used For printing the Data on Right Side-->
<div ng-controller="colony_Controller as Main_Module">
    <table class="table table-striped table-bordered" align="center" datatable="" dt-options="Main_Module.dtOptions" dt-columns="Main_Module.dtColumns" class="row-border hover">
</table>

如果未使用数据表

<!-- If DataTables are NOT Used for Printing the Data on Right Side -->
    <table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th style="width: 323px;" aria-label="">Colony Name</th>
            <th style="width: 170px;" aria-label="">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="colony in es_colony_details" >
            <td style="width: 323px;" aria-label="">{{colony.es_colony_name}}</td>
            <td>
                <button ng-click="EditColonyData(colony.es_colony_id)" class="btn btn-primary">
                    <i class="icon-edit"></i> Edit</button>
                <button ng-click="DeleteColonyData(colony.es_colony_id)" class="btn btn-danger">
                    <i class="icon-remove icon-white"></i> Delete</button>
            </td>
        </tr>
    </tbody>
    </table>

控制器

    Main_Module.controller('colony_Controller', function colony_Controller($window, $scope, $http, bootbox, $compile, DTOptionsBuilder, DTColumnBuilder, SimpleHttpRequest, DelMainRecPicRecUnlinkPic, message)
 {
     $scope.field = {};
     $scope.update = {};
     var dtInstance = {};
     /********************************** FETCH DATA START *******************************/
     $http.get('http://localhost:3000/api/SELECT/es_colony_type').success(function successCallback(data)
     {
         $scope.es_colony_type = data.es_colony_type;
         //console.log(data.es_colony_type);
     });
     // ONLY USED WHEN Datatable are NOT 
      //$http.get("http://localhost:3000/api/SELECT/es_colony").success(function successCallback(data)
      //{
      //    $scope.es_colony_details = data.es_colony;
      //    console.log(data.es_colony);
      //});
     /********************************** FETCH DATA END *********************************/
     /********************************** DISPLAY DATA START *******************************/
     var vm = this;
     vm.dtOptions = DTOptionsBuilder
     .fromFnPromise(function()
     {
         return $http.get('http://localhost:3000/api/SELECT/es_colony')
             .then(function(response)
             {
                 return response.data.es_colony;
             });
     })
     .withOption('order', [0, 'desc'])
     .withDisplayLength(5)
     .withPaginationType('simple_numbers')
     .withOption('createdRow', function(row, data, dataIndex)
     {
         $compile(angular.element(row).contents())($scope);
     })
     vm.dtColumns =
     [
         DTColumnBuilder.newColumn('es_colony_name').withTitle('Colony'),
         DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().withOption('width', '31%')
         .renderWith(function(data, type, full, meta)
         {
             return '<button class="btn btn-primary" ng-click="EditColonyData(' + data.es_colony_id + ');">' +
                 '<i class="icon-edit"></i> Edit' + '</button>&nbsp;' +
                 '<button class="btn btn-danger" ng-click="DeleteColonyData(' + data.es_colony_id + ');">' +
                 '<i class="icon-remove icon-white"></i> Delete' + '</button>';
         })
     ];
     $scope.EditColonyData = function(id)
     {
         console.log(id);
         $http.get('api/SELECTBYID/es_colony/es_colony_id/'+id)
             .success(function(data)
             {
                 console.log(data);
                 console.log($scope);

                 $scope.YesEdit = true;
                 $scope.update = data.es_colony[0];
                 // **This is where I'm injecting data Back to $scope object**
                 $scope.update.es_colony_type_id = data.es_colony[0].es_colony_type_id;
             });
     };

<div ng-controller="colony_Controller">
....
    <div ng-controller="colony_Controller as Main_Module">
      <table align="center" datatable="" dt-options="Main_Module.dtOptions" dt-columns="Main_Module.dtColumns" class="row-border hover">
      </table>
    </div>
</div>

$scope.dtOptions = DTOptionsBuilder
  .fromSource('data_colony.json')
  ...
$scope.dtColumns = [
  ...
];

<div ng-controller="colony_Controller">
  ...
  <div>
    <table align="center" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover">
    </table>
  </div>
</div>