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>

Inspect Element - Screenshot

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

what do you mean by coming in controller level not loading md-select? — Sajeetharan, Apr 04 '17 at 18:09
In the dialog I'm having a `md-select`. The collection is not loading in that `md-select`. Moreover refer this snapshot https://i.stack.imgur.com/6ZJWd.jpg — , Apr 05 '17 at 02:08
Possible duplicate of [How to use $http promise successCallback response outside callback in angularJs](http://stackoverflow.com/questions/35275451/how-to-use-http-promise-successcallback-response-outside-callback-in-angularjs) — georgeawg, Apr 05 '17 at 21:00

score 0 · Accepted Answer · answered Apr 06 '17 at 05:53

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);

  }
});

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

1 Answers1