Issue in accessing $scope variable in $mdDialog Controller - AngularJs 1.X.X

Question

I'm using $mdDialog and I specified a Controller which is present in another js file.

Parent Js Controller:

$scope.AddDesignationPrompt = function(ev) {
    $mdDialog.show({
        controller: 'AddDesignationPromptController',
        templateUrl: './Employee/Views/AddDesignation.tmpl.html',
        parent: angular.element(document.body),
        targetEvent: ev,
        clickOutsideToClose:true,
        fullscreen: true // Only for -xs, -sm breakpoints.
    })
    .then(function(answer) {
        $scope.GetPriliminaryData();
    }, function() {
        $scope.status = 'You cancelled the dialog.';
    });
};

Dialog Controller:

app.controller('AddDesignationPromptController', function ($scope, $rootScope, $mdDialog, $window, HTTPService) {
    $scope.loadUpData = {
            State: [],
            Department: [],
            Designation: []
      };

      HTTPService.getPriliminaryRegData().then(function (result) {
            if ((result != undefined) && (result != null)) {

                $scope.loadUpData = {
                    State: [],
                    Department: result.Result.Department,
                    Designation: []
                };

                console.log("Inside");
                console.log($scope.loadUpData);

            }
        });

    console.log("Outside");
    console.log($scope.loadUpData);

    $scope.hide = function() {
      $mdDialog.hide();
    };

    $scope.cancel = function() {
      $mdDialog.cancel();
    };

    $scope.answer = function(answer) {
      $mdDialog.hide(answer);
    };
});

View:

<md-dialog aria-label="Mango (Fruit)">
  <form ng-cloak>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>New Department</h2>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="cancel()">
          <md-icon md-svg-src="./Employee/images/Close.svg" aria-label="Close dialog"></md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <md-dialog-content>
      <div class="md-dialog-content">
        <p>Enter the New Department</p>
        <div class="controlItem">
            <md-select ng-model="select.designation" ng-change="onDesignationChange(select.designation)" tabindex="9">
                <md-option ng-repeat="key in loadUpData.Designation" value="{{key.DesignationId}}">{{key.Name}}</md-option>
            </md-select>
        </div>
      </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
      <span flex></span>
      <md-button ng-click="answer('not useful')">
       Not Useful
      </md-button>
      <md-button ng-click="answer('useful')">
        Useful
      </md-button>
    </md-dialog-actions>
  </form>
</md-dialog>

Its coming in controller level, but its not loading in md-select. Kindly assist me how to load the collection in the View.

Answer 1

You are looping over loadUpData.Designation which is always set to empty array [], so nothing will be ever displayed. The only data that is populated in your HTTPService promise resolve is loadUpData.Department, but you never print it in your HTML.

if you have Designation in result, than populate it, something like:

HTTPService.getPriliminaryRegData().then(function (result) {
  if (result && result.Result) {

    $scope.loadUpData = {
      State: [],
      Department: result.Result.Department,
      Designation: result.Result.Designation
    };

    console.log("Inside");
    console.log($scope.loadUpData);

  }
});