Child Directive Model not Updating with Parent Changes Using AJAX call - angularjs

Question

My directive model is not receiving parent model changes when using an AJAX call to populate model. It should be noted child changes are passed to parent. I have seen other questions close to this but none that seemed to successfully this issue of child not receiving parent updates, while being able to update parent.
The "ngModel" is annotated as required in directive, passed in through template and successfully populated with AJAX call. The "ngModel" is given bidirectional access in the directive scope using ngModel : '=' I included parent html, child html, and angular directive + controller used. I have annotated each to explain usage as well as included annotated log.
Thank you in advance for any advice/pointers/help.
define([ 'angular' ], function(angular) {
'use strict';
return angular.module('app', [])
.controller('addDataCtrl', ['$scope', 'Data', 'User', '$location', '$routeParams', function($scope, Dataset, User, $location, $routeParams) {
// log when data.testEnumeratedType is updated
$scope.$watch('data.testEnumeratedType', function() {
console.log("initialEnumeratedType has been updated to : ", $scope.data.testEnumeratedType);
});
// RESTful call for data
if($routeParams.id) {
$scope.data = Data.get({id: $routeParams.id});
}
}]);
.directive('ngEnumTypeSelect', function() {
return {
restrict : 'A',
require : 'ngModel',
scope : {
ngEnumDomain : '#', // bind scope's ngEnumDomain with ngEnumDomain
// value declared in enclosing template.
ngModel : '=',
},
templateUrl : 'selectEnumeratedTypes.html',
link : function(scope, element, attrs, ctrl) {
scope.getEnumTypes(attrs.ngEnumDomain);
// update this child scope model with parent value.
scope.$watch(ctrl, function() {
scope.currentEnumType = ctrl.$viewValue;
console.log(" Directive model changed to : ", scope.currentEnumType);
});
// update parent scope's model with selected value
scope.$watch('currentEnumType', function (value) {
console.log(" Setting parent model value to : ", value);
ctrl.$setViewValue(value);
console.log(" Parent model value is : ", ctrl.$viewValue);
});
},
controller : ['$scope', 'EnumeratedType', '$location', function($scope, EnumeratedType, location) {
$scope.getEnumTypes = function(enumDomain) {
$scope.enumTypes = [];
EnumeratedType.getEnumTypes( { type : enumDomain }, function(enumType) {
var enumeratedValues = enumType.enumeratedValues;
for (var index = 0 ; index < enumeratedValues.length ; index++) {
$scope.enumTypes.push(enumeratedValues[index].value);
}
});
};
$scope.updateCurrentEnum = function(enumType) {
$scope.currentEnumType = enumType;
};
}],
};
});
});
Annotated Log :
initialEnumeratedType has been updated to : undefined
Directive model changed to : undefined directives.js:140
// below AJAX call is made, parent model value is updated to Trials,
// but change is not communicated to child directive.
initialEnumeratedType has been updated to : Trials
// when value is selected, changed is propagated to parent.
Setting parent model value to : None Selected
Parent model value is : None Selected
HTML
<!-- Parent html -->
<!-- The value is populated below - meaning model is populated via RESTful call -->
<div class="form-group">
<label for="imageName" class="col-sm-2 control-label"></label>
<div class="col-sm-4"></div>
<label for="testEnumeratedType" class="col-sm-2 control-label">Type As Stored</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="testEnumeratedType" placeholder="{{dataset.testEnumeratedType}}" ng-model="dataset.testEnumeratedType">
</div>
</div>
<!-- The value is not initially populated below - meaning the parent model is not updating child model -->
<div class="form-group">
<label for="imageName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="imageName" placeholder="{{dataset.name}}" ng-model="dataset.name">
</div>
<label for="enumTypeSelect" class="col-sm-2 control-label">Type</label>
<div style="padding-left: 30px" class="col-sm-4" id="enumTypeSelect" data-ng-enum-type-select="{{dataset.testEnumeratedType}}" data-ng-enum-domain="Type" ng-model="dataset.testEnumeratedType"></div>
</div>
<!-- Child html -->
<div class="row">
<!-- Create dropdown with button and list values -
Display value {{currentEnumType}} is not being initially updated-->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
{{currentEnumType}} <span class="caret"/>
</button>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="updateCurrentEnum(enumType)">{{enumType="None Selected"}}</a></li>
<li class="divider"></li>
<li ng-repeat="enumType in enumTypes">
<a ng-click="updateCurrentEnum(enumType)">{{enumType}}</a>
</li>
</ul>
</div>