Update
Problem: Let me try to explain what I want in one or two lines, In Demo 1 where I've used Angular Datatables when I click on Edit button the data DOES NOT appear in Edit form, whereas in Demo 2 I haven't used any datatables but the data is clearly appearing in edit form, I want the data to appear in Demo1 using Datatables. The data is inside the $scope.update but for some reasons it is not appearing in HTML whereas using the same HTML It works perfectly without datatables.
Demo1: http://plnkr.co/edit/EXXbkPUHfxcZ3blzvMaz?p=preview
Demo2: http://plnkr.co/edit/QYZzmJNwWTQaIgvUkRzQ?p=preview
Background
Initially on the left hand side the Data is inserted from a form which contain one Input type and one Select (Colony Type), there are two forms Insert, Update form on the left hand side one form is for insertion and one for editing, when the insertion form is visible the edit form is hidden and vice versa, on the right hand side the list of data is displayed with the help of datatables along with Edit and Delete button, Important thing is the buttons are made inside the DataTable code and not on HTML page, now Delete and Insert works absolutely fine, but Edit !! No it doesn't.
Problem
Case 1: (When I use Datatables) when the Edit button (CODED INSIDE DATATABLES) is clicked an ID is sent, In the Below picture the Id is consoled "47" then an $http request is made which brings the Data and printed in console. but when I try to inject the values back to Update form it doesn't work, although when I consoled $scope the values are injected into update object but not printing on HTML page.
Case 2: (When I don't Use Datatables) If I don't use Datatables and click the Edit the button every thing works absolutely fine and the data is injected into update object and printed on HTML page.
HTML PAGE:
If DataTables are Used
<!-- 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
<!-- 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>
Controller
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> ' +
'<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;
});
};
