Save the state of ag-grid in angularjs - angularjs

Question

Hi when i click on a button my ag-grid loads the data from database.Next time how to see the data in ag-grid without clicking on a button.Basically i want to save and restore the state of ag-grid to avoid the button click every time in order to load the data in ag-grid.
agGrid.initialiseAgGridWithAngular1(angular);
var module = angular.module("example", ["agGrid"]);
module.controller("exampleCtrl", function($scope, $http) {
var columnDefs = [
{headerName: "Athlete", field: "athlete", width: 150, cellRenderer: athleteCellRendererFunc},
{headerName: "Age", field: "age", width: 90, cellRenderer: ageCellRendererFunc},
{headerName: "Country", field: "country", width: 120, cellRenderer: countryCellRendererFunc},
{headerName: "Year", field: "year", width: 90},
{headerName: "Date", field: "date", width: 110},
{headerName: "Sport", field: "sport", width: 110},
{headerName: "Gold", field: "gold", width: 100},
{headerName: "Silver", field: "silver", width: 100},
{headerName: "Bronze", field: "bronze", width: 100},
{headerName: "Total", field: "total", width: 100}
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: null,
angularCompileRows: true
};
function ageClicked(age) {
window.alert("Age clicked: " + age);
}
function athleteCellRendererFunc() {
return '<span ng-bind="data.athlete"></span>';
}
function ageCellRendererFunc(params) {
params.$scope.ageClicked = ageClicked;
return '<button ng-click="ageClicked(data.age)" ng-bind="data.age"></button>';
}
function countryCellRendererFunc(params) {
return '<country name="'+params.value+'"></country>';
}
$scope.getData = function(){
//console.log("hello");
$http.get("https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json")
.then(function(res){
$scope.gridOptions.api.setRowData(res.data);
});
}
});
module.directive('country', function () {
var FLAG_CODES = {
'Ireland': 'ie',
'United States': 'us',
'Russia': 'ru',
'Australia': 'au',
'Canada': 'ca',
'Norway': 'no',
'China': 'cn',
'Zimbabwe': 'zw',
'Netherlands': 'nl',
'South Korea': 'kr',
'Croatia': 'hr',
'France': 'fr'
};
var flagHtml = '<img ng-show="flagCode" class="flag" border="0" width="20" height="15" src="https://flags.fmcdn.net/data/flags/mini/{{flagCode}}.png" />';
var nameHtml = '<span ng-bind="countryName" />';
return {
scope: true,
template: flagHtml + ' ' + nameHtml,
link: function(scope, element, attrs) {
var countryName = attrs.name;
scope.countryName = countryName;
scope.flagCode = FLAG_CODES[countryName];
}
};
});
Below is the plunker code link:
https://plnkr.co/edit/PKTiFpd9WM1UeELT72ht?p=preview`

Answer 1

Are you trying to retrieve the data as soon as the grid has been initialized? If so, you can use the onGridReady event:
// create and inject a factory, e.g. "gridStateFactory"
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: null,
angularCompileRows: true,
onGridReady: function() {
if (gridStateFactory.isInitialized) {
$scope.getData();
}
};
$scope.getData = function(){
//console.log("hello");
$http.get("https://raw.githubusercontent.com/ag-grid/ag-grid-
docs/master/src/olympicWinners.json")
.then(function(res){
gridStateFactory.setInitialized();
$scope.gridOptions.api.setRowData(res.data);
});
}