Custom data binding and loading, angular grid

[rbazua]

Hello, I'm new with the free version of the grid, but having a problem.
I am using your angular solution http://angularjsgrid.com. What I want is to have full control on the data binding, I want to be able to update the grid dataModel whenever I want from my backend calls.

I couldn't setup the fiddle with the angular libraries so I'm pasting here my code. What I did is to edit and run your demo in http://angularjsgrid.com/demos/data-binding. Here is the code

Script

Code: [Select]

(function () {
   

    angular.module('myApp', ['pq.grid']).
    controller('myCtrl', function($scope){
var data = [
        { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
        { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
        { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
        { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
    ];
        //var vm = this;
        $scope.myData = data;

$scope.gridOptions = {
width: '100%',
colModel: [
{ title: "Rank", dataIndx: 'rank', template: '{{rd.rank}}' },
{ title: "Company", dataType: "string", dataIndx: "company", template: '{{rd.company}}',
filter:{ type: 'textbox', condition: 'contain', listeners: ['keyup'] }
},
{ title: "Revenues", dataType: "float", dataIndx: "revenues",
template: '{{rd.revenues|currency}}'
},
{ title: "Profits", dataType: "float", dataIndx: "profits",
template: '{{rd.profits|currency}}'
}
],
title: "Angularjs grid",
filterModel: {on: true, header: true},
scrollModel: { autoFit: true },
dataModel: { data: $scope.myData }
};         

$scope.search = function() {
$scope.myData = [
{ rank: 5, company: 'TESTA', revenues: 1234.0, profits: 1111.0 },
{ rank: 6, company: 'TESTB', revenues: 5678.0, profits: 2222.0 }];

}

    });
})();

HTML

Code: [Select]

<div ng-app="myApp" ng-controller="myCtrl as vm">
<div style="float:left;width:49%;">
<div pq-grid="" options="gridOptions"></div>
</div>
<div style="float:right;width:49%;">
<div ng-repeat="rd in myData" ng-cloak="">
<input type="text" ng-model="rd.rank">
<input type="text" ng-model="rd.company">
<input type="text" ng-model="rd.revenues">
<input type="text" ng-model="rd.profits">
</div>
</div>
<div style="clear:both;"></div>
<button id="searchBtn" ng-click="search()">Search</button>
</div>
 

When this runs, it renders the grid with the array dataSource, that's ok.
I added a Search button, and when I click it, the listener function recreates the $scope.myData array I use as the dataModel. Since the dataModel was updated, I'd expect the grid to be refreshed with new data. But it's not, it stays with the old data.

Could you please orientate me on where I'm doing this wrong?
Let me know if you need any other info to help.
Thanks in advance.

[paramvir]

In controller, it would be

Code: [Select]

                vm.search = function(){
vm.myData = [
{ rank: 5, company: 'TESTA', revenues: 1234.0, profits: 1111.0 },
{ rank: 6, company: 'TESTB', revenues: 5678.0, profits: 2222.0 }
];
}

in HTML

Code: [Select]

<button id="searchBtn" ng-click="vm.search()">Search</button>


[rbazua]

Thanks for the help