how to load template for add or edit record in for syncfusion grid in partial view

Question

I have to do when for edit and add record in grid i have to load adding record template in partial view in place of grid view

i. e. in place of grid view i have to load add record template and dont want to show grid and after save click on template i have to load that grid with added new record please suggest solution only using AngularJS

<div ng-controller="LeadListController">
<div class="col-xs-9 col-sm-9 col-lg-9 col-md-9">
    <div id="Grid" ej-grid e-datasource="data" e-allowgrouping="true" e-pagesettings-pagesize="8" e-pagesettings-currentpage="page" e-toolbarsettings-showtoolbar='true' e-toolbarsettings-toolbaritems='tools' e-editsettings-allowdeleting=' true'
        e-editsettings-allowediting='true' e-editsettings-allowadding='true' e-allowpaging="true" e-beginedit="disableedit" e-sortsettings="sorting"
        e-editsettings-editmode='externalform' e-formposition="bottomLeft" e-editsettings-inlineformtemplateid="#template" e-selectedrowindex="selectedRow" e-allowsorting="true" e-endedit="endedit" e-actionbegin="actionBegin" e-actioncomplete="complete">
        <div e-columns>
            <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right" e-width="90"></div>
            <div e-column e-field="LastName" e-headertext="Last Name" e-textalign="left" e-width="90"></div>
            <div e-column e-field="FirstName" e-headertext="FirstName" e-textalign="left" e-width="90"></div>
            <div e-column e-field="Title" e-headertext="Title" e-textalign="left" e-width="90"></div>
            <div e-column e-field="City" e-headertext="City" e-textalign="left" e-width="90"></div>
            <div e-column e-field="Country" e-headertext="Country" e-textalign="left" e-width="90"></div>

        </div>
    </div>
</div>

Answer 1

The ng-if create new child scope like ng-include and hence access $scope.$parent.gridpage inside the child controller will search for the gridpage inside the scope created by ng-if and hence its not working.

And so to access the controller scope of the grid, use as follows.

 $scope.back = function () {        
     $scope.$parent.$parent.leadview = false;
     $scope.$parent.$parent.gridpage = true;
     . . . . .

};