Angular.js : recursive call to an $mdDialog controller

i have a grid and when for exemple i select two elements, when i click on edit i want to show a popup and then with buttons previous and nexi, i want to navigate between 2 popups for 2 elements selected, for now, i'm talking about 2 popups but it could be more depending on the selected elements, so i implemented the solutions, the first popup shows up just fine with values of the first row selected but then when i click next to show the next one, the values of the second row dont get rendered. I dont know what's the problem.I read somewhere that maybe i need to use broadcast but i dont know how.

The mdDialog controller

function popupController($mdDialog, locals, $rootScope) {
        
        var dp = Object.assign(this, locals);
        dp.aaa = dp.aaas[dp.order];

        function hideDialog() {
            return $mdDialog.hide();
        }

        function cancelDialog() {
            return $mdDialog.cancel();
        }

        function nextFunctionPopup() {
            
            var index = dp.aaas.findIndex(aaa => aaa.id === dp.aaa.id);
            dp.order = index + 1;
            
            $mdDialog.show({
                bindToController: true,
                preserveScope: true,
                ariaLabel: 'AAAAAA',
                templateUrl: 'aaa-popup.html',
                controller: 'popupController',
                controllerAs: 'dp',
                locals: dp
            });
        }

    }

The html

<md-dialog aria-label="{{dp.title}}" flex="50">
    <md-toolbar class="md-toolbar-tools">
        <h2>{{dp.title}}</h2><span flex></span>
        <md-button class="md-icon-button" ng-click="dp.hideDialog()">
            <md-icon aria-label="Close dialog">close</md-icon>
        </md-button>
    </md-toolbar>
    <md-dialog-content>
        <md-content layout-padding>
            <form name="dp.aaaForm">
                <div layout="row" layout-xs="column">
                    <md-input-container class="md-block" flex="50" style="margin-top: 18px;">
                        <label>ID</label>
                        <input type="text" name="matricule" ng-model="dp.aaa.id" ng-readonly="true" numbers-Only ng-disabled="true">
                    </md-input-container>
                </div>
                <div layout="row" layout-xs="column">
                    <md-input-container class="md-block" flex style="margin-top: 18px;">
                        <label>Full name</label>
                        <input name="name" ng-model="dp.aaa.nom" ng-readonly="true" ng-disabled="true">
                    </md-input-container>
                    <md-input-container class="md-block" flex style="margin-top: 18px;">
                        <label>Name</label>
                        <input name="bbb" ng-model="dp.aaa.prenom" ng-readonly="true" ng-disabled="true">
                    </md-input-container>
                </div>
            </form>
        </md-content>
    </md-dialog-content>
    <md-dialog-actions layout="row" layout-align="end center">
        <button ng-if="dp.listIDs !== undefined" ng-hide="dp.listHide" action="next" class="md-raised md-primary"
        nrh-click="dp.nextFunctionPopup()" ng-disabled="" type="submit"></button>
    </md-dialog-actions>
</md-dialog>

I figured out how to do it finally, I didnt need to recall the mdDialog in the next function. Since angular.js uses auto-binding, i cant just use the object directly

function nextFunctionPopup() {
            
    var index = dp.aaas.findIndex(aaa => aaa.id === dp.aaa.id);
    dp.order = index + 1;
    dp.aaa = dp.aaas[dp.order];
}