ag-grid is not populating inside a function?

Question

I'm new in using agGrid forgive me if you find something silly. So before this I was using Kendo Grid on angularjs but we thought to switch to some other grid so we are trying agGrid right now.

Below is the a sample of aggrid which is working fine and everything works. But, When i move my grid options inside a function which will be getting called on button click I'm getting WARNING - grid options for ag-Grid not found. Please ensure the attribute ag-grid points to a valid object on the scope.

I'm not able to understand what is the problem because inside this function kendo grid options are working fine and kendo grid is getting populated but I'm not sure what i'm doing wrong with the agGrid.

Kindly help me.

function abc($rootScope,$scope, $state, $stateParams, $timeout, Upload, baseURL, $cookieStore, $log, errorCheckFactory) {
    var columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"}
    ];

    var rowData = [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];

    $scope.gridOptions2 = {
        columnDefs: columnDefs,
        rowData: rowData,
        enableFilter: true,
        enableColResize: true,
        enableSorting: true,
        groupHeaders: true,
        rowHeight: 22,
        //onModelUpdated: onModelUpdated,
        suppressRowClickSelection: true

    };

}

Answer 1

If the grid does not foud your gridOptions that surely means you have a typo in your html template

Check your hml template it must have

ag-grid="gridOptions2"

Note : if you use a controller with the controllerAs way, you have to bind variables on this and not on $scope.

If it's not this add, your html and your route/state/whatever definition of the navigation.