How to access a template control value in parent.

See more:

AngularJs

we have controller which has ng-include to load an external html. now i want to access a control value in parent.

my template is MainMenuCreate

@{

    Layout = null;
}
<div >
<h2>{{Headtitle}}</h2>
<p>
    <div style="width:200px;">MainMenuId :</div>
     <input type="text" name="MainMenuId" id="MainMenuId" data-ng-model="MainMenuId" />
</p>
<p>
    <div style="width:200px;">MainMenu :</div>
     <input type="text" name="MainMenu" id="MainMenu" data-ng-model="MainMenu" />
</p>
<p>
    <div style="width:200px;">PageTitle :</div>
     <input type="text" name="PageTitle" id="PageTitle" data-ng-model="PageTitle" />
</p>

 <input type="button" name="btnSave" id="btnSave" value="Save" ng-click="Save()" />

and my main page is

<div data-ng-app="MainMenuModule">
    <div data-ng-controller="MainMenuController">
    <div data-ng-include="'MainMenuCreate'" >
     </div>
      {{MainMenuId}}
    </div>
        
</div>

and controller is

app.controller('MainMenuController', function ($scope, MainMenuService) {
   

    $scope.Save = function () {
        
        var MainMenuRecord =
            {
                MainMenuId: $scope.MainMenuId,
                MainMenu: $scope.MainMenu,
                PageTitle: $scope.PageTitle,
               pe.HomePanelStatus,
                PageId: $scope.PageId
            };
        var promisePost = MainMenuService.post(MainMenuRecord);
        promisePost.then(function (pl) {
            $scope.MainMenu = pl.data.MainMenu;
            loadRecords();
        }, function (err) {
            console.log("Err" + err);
        });
    }

});

when i call this save method then $scope.MainMenuId shows undefined