Create new item and add that item to ngtable object and update the view in angularjs -

Create new item and add that item to ngtable object and update the view in angularjs -

i have table displayed in page. html , controller code below:

controller code

$scope.coordinatorlistpromise = coordinatorlist.get({id: $routeparams.id}, function (response) { $scope.data.managecoordinators = response.data; $scope.data.managecoordinators.coordinators = response.data.coordinators; $scope.tableparams = new ngtableparams({ sorting: { roleid: 'asc', firstname: 'asc' } }, { getdata: function ($defer, params) { var ordereddata = params.sorting() ? $filter('orderby')($scope.data.managecoordinators.coordinators, params.orderby()) : $scope.data.managecoordinators.coordinators; $defer.resolve(ordereddata); } }); });

html code

<table class="table table-bordered coordinatorlisttable" ng-table="tableparams"> <tbody> <tr class="col-heading" ng-repeat="coordinator in $data"> <td data-title="'name'" data-sortable="'firstname'"><b><span ng-bind="coordinator.firstname"></span><span class="gap"> </span><span ng-bind="coordinator.lastname"></span><span class="gap"> </span></b><span ng-bind="'('+ coordinator.title +')'"></span><br/><a href="mailto:{{coordinator.email}}" target="_top" ng-bind="coordinator.email"></a><br/><span ng-bind="coordinator.phone"></span></td> <td data-title="'type'" data-sortable="'roleid'"><span ng-bind="coordinator.role"></span></td> <td data-title="'menu'" class="menuicons"> <a class="btn btn-img"><img class="editimg" ng-click="editcoordinator(coordinator.id)" src="images/icon/setup_icons/setup-table-action-edit-base.png"/></a> <a class="btn btn-img"><img class="removeimg" ng-click="deletecoordinatorpopup(coordinator,data.institution.id)" src="images/icon/setup_icons/setup-table-action-remove-base.png"/></a> <a class="btn btn-img bordercls" ng-click="sendemail(coordinator.id)"><img class="sendlinkimg" src="images/icon/setup_icons/setup-table-action-sendlink-base.png"/> send link</a> <p class="lastsent"><span ng-bind="'last sent :'"></span><span ng-if="coordinator.welcome_email_sentdate != false" ng-bind="(coordinator.welcome_email_sentdate | date:'mm/dd/yyyy')"></span> </p> </td> </tr> </tbody> </table>

the json format of info follows:

{ "errors": [], "data": { "last_updated": "2014-10-17t10:50:02+0000", "coordinators": [ { "id": 171, "firstname": "tanya", "lastname": "otter", "welcome_email_sentdate": "2014-10-17t00:00:00+0000", "title": "ms", "email": "abcr@gmail.com", "phone": "44558666", "ismobile": true, "role": "non technical coordinator", "roleid": 3 }, { "id": 196, "firstname": "adarsh", "lastname": "h", "welcome_email_sentdate": false, "title": "mr", "email": "xyz@gmail.com", "phone": "2589645", "ismobile": true, "role": "technical coordinator", "roleid": 2 } ] }, "sideloaded": [] }

now when need add together 3rd info list, making api call

$scope.coordinatorcreatepromise = $scope.data.coordinator.$save({id: $scope.data.coordinator.organizationid}, function (response) { $scope.pushdata(response.data); }

the $scope.pushdata function pushing new saved info existing object.

$scope.pushdata=function(saveddata){ $scope.data.managecoordinators.coordinators.push({"id":saveddata.id, "firstname": saveddata.firstname, "lastname": saveddata.lastname, "title": saveddata.title,"roleid":saveddata.roleid,"email": saveddata.email,"ismobile": saveddata.ismobile,"phone": saveddata.phone,"role": "primary coordinator"}); $scope.tableparams.reload(); console.log($scope.data.managecoordinators.coordinators); }

in console seeing new info appended object. in view not updated. can please help me. new angularjs.

here implementation of cooredinatorlist.get

apiservice.factory("coordinatorlist", function ($resource, baseurl) { homecoming $resource( baseurl+"/organization/:id/coordinator", {id: "@id" }, { "read": {method: "get", headers: {'content-type': 'application/json'}}, "update": {method: "put", headers: {'content-type': 'application/json'}}, "delete": {method:'delete'} } ); });

angularjs