Angular ngDialog not Displaying model data in $scope - angularjs

Question

Continually having issues with ng-dialog properly displaying model data. My app uses two ng-dialog instances, one to add data (in this case for a League) and a second dialog to edit data. Both use the the same ng-model data. When add League is selected, the first dialog pops up, the user populates the fields, and saves the record, the dialog is closed and the main page displays the created League along with its data. An EDIT button is presented.
The issue in this case occurs when the EDIT button is pressed.
The controller's openEditLeague method is called, which prepopulates the leagueForm with the data for the league I am trying to edit.
'use strict';
angular.module('ma-app')
.filter('trustUrl', function ($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
})
.controller('HomeController', ['$scope', 'ngDialog', 'authService', 'coreDataService', 'userService', '$rootScope', 'clubService', 'schedulingService', function($scope, ngDialog, authService, coreDataService, userService, $rootScope, clubService, schedulingService) {
....
$scope.leagueForm = {
name: '',
shortname: '',
minAgeGroup: null,
maxAgeGroup: null,
type: null,
rescheduleDays: '',
consequence: '',
fine: '',
logoURL: '',
leagueId: ''
};
....
$scope.openEditLeague = function(league) {
console.log("\n\nOpening dialog to edit league");
console.log(league);
$scope.leagueForm = {
name: league.name,
shortname: league.short_name,
minAgeGroup: league.min_age_group,
maxAgeGroup: league.max_age_group,
type: league.type,
rescheduleDays: league.reschedule_time,
consequence: league.reschedule_consequence,
fine: league.reschedule_fine,
logoURL: league.logo_url
};
console.log("Current entries include: ");
console.log($scope.leagueForm);
ngDialog.open({ template: 'views/editLeague.html', scope: $scope, className: 'ngdialog-theme-default custom-width-600', controller:"HomeController" });
};
....
}])
;
I am logging the contents of the $scope.leagueForm prior to opening the ng-dialog, and the data contents are correct.
When the dialog opens however, all fields are empty.
This should be fairly straight forward data-binding, so I must be doing something wrong.
Here are the contents of the editLeague.html that are used to generate the ng-dialog:
<div class="ngdialog-message">
<div>
<h3>Edit League</h3>
</div>
<div> </div>
<div>
<form class="form-horizontal" ng-submit="editLeague()">
<div class="form-group">
<label class="sr-only" for="name">League Name</label>
<div class="col-xs-12 col-sm-6">
<input type="text" class="form-control" id="name" placeholder="league name" ng-model="leagueForm.name">
</div>
<label class="sr-only" for="shortname">League Abbreviation</label>
<div class="col-xs-12 col-sm-6">
<input type="text" class="form-control" id="shortname" placeholder="league abbreviation" ng-model="leagueForm.shortname">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="minage">Minimum Age Group</label>
<div class="col-xs-12 col-sm-6">
<div class="input-group">
<div class="input-group-addon">Min Age Group</div>
<select id="minage" class="form-control" ng-model="leagueForm.minAgeGroup" ng-options="ageGroup as ageGroup.name for ageGroup in ageGroups"></select>
</div>
</div>
<label class="sr-only" for="maxage">Maximum Age Group</label>
<div class="col-xs-12 col-sm-6">
<div class="input-group">
<div class="input-group-addon">Max Age Group</div>
<select id="maxage" class="form-control" ng-model="leagueForm.maxAgeGroup" ng-options="ageGroup as ageGroup.name for ageGroup in ageGroups"></select>
</div>
</div>
</div>
<div class="form-group">
<label class="sr-only" for="type">League Type</label>
<div class="col-xs-12 col-sm-6">
<div class="input-group">
<div class="input-group-addon">Type</div>
<select id="type" class="form-control" ng-model="leagueForm.type" ng-options="leagueType as leagueType.name for leagueType in leagueTypes"></select>
</div>
</div>
<label class="sr-only" for="days">Day to Reschedule</label>
<div class="col-xs-12 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" id="days" placeholder="days to reschedule" ng-model="leagueForm.rescheduleDays">
<div class="input-group-addon">Days</div>
</div>
</div>
</div>
<div class="form-group">
<label class="sr-only" for="consequence">Missed Reschedule Date Consequence</label>
<div class="col-xs-12 col-sm-6">
<div class="input-group">
<div class="input-group-addon">Consequence</div>
<select id="consequence" class="form-control" ng-model="leagueForm.consequence">
<option value =""></option>
<option value="NONE">N/A</option>
<option value="FORFEIT">Forfeit</option>
<option value="FINE">Fine</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="input-group" ng-show="!fineHidden">
<label class="sr-only" for="fine">Fine</label>
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="fine" placeholder="fine" ng-model="leagueForm.fine">
<div class="input-group-addon">.00</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-info">Update</button>
<button type="button" class="btn btn-default" ng-click=closeThisDialog("Cancel")>Cancel</button>
</form>
</div>
<div> </div>
</div>

Answer 1

I think it may be due to you passing the controller value as HomeController - which is overwriting the leagueForm value (to empty values) in the $scope as it's spun up.

Answer 2

Resolved. Was very simple after all. Just needed to remove the empty definition of
$scope.leagueForm = {
name: '',
shortname: '',
minAgeGroup: null,
maxAgeGroup: null,
type: null,
rescheduleDays: '',
consequence: '',
fine: '',
logoURL: '',
leagueId: ''
};
from the controller. Then reference leagueForm.name, etc, as the ng-model in the Add dialog, and finally my $scope.openEditLeague function works as it is specified in the original post.