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.aaas[dp.order];

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

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

        function nextFunctionPopup() {
            var index = dp.aaas.findIndex(aaa => ===;
            dp.order = index + 1;
                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-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;">
                        <input type="text" name="matricule" ng-model="" ng-readonly="true" numbers-Only ng-disabled="true">
                <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="" ng-readonly="true" ng-disabled="true">
                    <md-input-container class="md-block" flex style="margin-top: 18px;">
                        <input name="bbb" ng-model="" ng-readonly="true" ng-disabled="true">
    <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>


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 => ===;
    dp.order = index + 1; = dp.aaas[dp.order];