javascript - Angular JS with JQGrid/Jquery -

i have created angular directive wraps jqgrid features me. can see when update model view jqgrid directive gets updated. when update data in grid directive model not updated. further yet when getgridparam('data') still shows old bound data. edited grid in view , added text cell. don't show @ all.

directive code

    'use strict'  define(['app'], function (app) {    var ctdsjqgriddirective = function () {         return {             restrict: 'e',             scope: {                 config: '=',                 data: '=',                 selectrow: '='             },             link: function (scope, element, attrs) {                 var table;                     scope.$watch('config', function (newvalue, oldvalue) {                     element.children().empty();                     table = angular.element('<table id="#123"></table>');                     element.append(table);                     $(table).jqgrid(newvalue);                        });                  scope.$watch('data', function (newvalue, oldvalue) {                     var i;                     $(table).jqgrid('setgridparam', { data: newvalue })                     .trigger('reloadgrid');                                        });             }         };     };     app.directive('ngjqgrid', ctdsjqgriddirective); }); 

controller code: phonescontroller.js

'use strict'  define(['app'], function (app) {     var injectparams = ['$location', '$filter', '$window', '$timeout'];      var phonescontroller = function ($location, $filter, $window, $timeout) {           var vm = this;             vm.phones = [];         vm.filteredphones = [];         vm.orderby = 'age';         vm.message = "hello";         vm.config = {};         vm.showphones = false;         vm.mgrid = null;         vm.trial = null;         function init() {             setconfig();             getphones();             };          vm.displayphones = function ()         {             vm.showphones = true;         };          vm.selectrow = function (id) {             vm.mgrid.editrow(id, true);             vm.mgrid.bind('blur', function () {                 var abc = vm.mgrid.jqgrid('getgridparam', 'data');                 vm.phones = abc;             });             };          vm.saverow = function (rowid, cellname, value, irow, icol) {             var abc = vm.mgrid.jqgrid('getgridparam', 'data');         };              function setconfig() {             var config = {                 datatype: "local",                 height: 550,                 colnames: ['id', 'name', 'description', 'imagepath', 'age'],                 colmodel: [                     { name: 'id', index: 'id', editable: true, width: 60, sorttype: "int" },                     { name: 'name', index: 'name', editable: true, width: 100 },                     { name: 'description', index: 'description',  width: 150, editable: true },                     { name: 'imagepath', index: 'imagepath', editable: true, width: 150 },                     { name: 'age', index: 'age', editable: true, width: 80, align: "right", sorttype: "int" }                  ],                  editable: true,                 celledit: true,                 cellsubmit: 'clientarray',                 beforesavecell: function (rowid, cellname, value, irow, icol) {                     vm.trial = $(this);                     var abc = vm.trial.jqgrid('getgridparam', 'data');                     vm.saverow(rowid, cellname, value, irow, icol);                 },                 aftersavecell: function (rowid, cellname, value, irow, icol) {                     vm.trial = $(this);                     var abc = vm.trial.jqgrid('getgridparam', 'data');                     vm.saverow(rowid, cellname, value, irow, icol);                 },                 aftereditcell: function (rowid, cellname, value, irow, icol) {                     vm.trial = $(this);                     var abc = vm.trial.jqgrid('getgridparam', 'data');                     vm.saverow(rowid, cellname, value, irow, icol);                 },                 beforesubmitcell: function (rowid, cellname, value, irow, icol)                 {                     vm.trial = $(this);                     var abc = vm.trial.jqgrid('getgridparam', 'data');                     vm.saverow(rowid, cellname, value, irow, icol);                 },                 multiselect: true,                 caption: "phone array data",                 loadcomplete: function () {                     vm.mgrid = $(this);                 }             };             vm.config = config;         };          function getphones() {             var data;             data = [         { id: "1", name: "nexus4", description: "nexus4 powerful phone", imagepath: "/images/nexus4.jpg", age: "10" },         { id: "2", name: "iphone6", description: "iphone6 smart popular phone", imagepath: "/images/iphone6.jpg", age: "20" },         { id: "3", name: "iphone6 plus", description: "iphone6 plus bigger , better", imagepath: "/images/iphone6plus.jpg", age: "30" },         { id: "4", name: "samsung gs4", description: "gs4 sleek phone", imagepath: "/images/gs4.jpg", age: "10" },              ];             vm.phones = data;         }             init();         };      phonescontroller.$inject = injectparams;     app.register.controller('phonescontroller', phonescontroller); }); 

html code: phones.html - uses controller phonescontroller (posting partial portion of code

<div>     hi there     <button ng-click="vm.displayphones()">show phones</button>      <ng-jq-grid config="vm.config" data="vm.phones" gridid="qwertt"></ng-jq-grid>        <ul class="phones">         <li ng-repeat="li in vm.phones" ng-show="vm.showphones">             name: {{li.name}},             description : {{li.description}}         </li>     </ul>  </div> 

now in events can see edited cell value. if

var abc = vm.mgrid.jqgrid('getgridparam', data); doesnot return grid data edited cell value. returns old data. why binding not working view model?