title: Child Directive Model not Updating with Parent Changes Using AJAX call
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Thank you in advance for any advice/pointers/help.</p>
  
  <pre><code>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 &lt; enumeratedValues.length ; index++) {
                          $scope.enumTypes.push(enumeratedValues[index].value);
                      }
                  });
              };
  
              $scope.updateCurrentEnum = function(enumType) {
                  $scope.currentEnumType = enumType;
              };
  
          }],
      };
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Annotated Log : </p>
  
  <pre><code>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
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- Parent html --&gt;
  
  &lt;!-- The value is populated below - meaning model is populated via RESTful call --&gt;
  &lt;div class="form-group"&gt;
      &lt;label for="imageName" class="col-sm-2 control-label"&gt;&lt;/label&gt;
      &lt;div class="col-sm-4"&gt;&lt;/div&gt;
      &lt;label for="testEnumeratedType" class="col-sm-2 control-label"&gt;Type As Stored&lt;/label&gt;
      &lt;div class="col-sm-4"&gt;
          &lt;input type="text" class="form-control" id="testEnumeratedType" placeholder="{{dataset.testEnumeratedType}}" ng-model="dataset.testEnumeratedType"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- The value is not initially populated below - meaning the parent model is not updating child model --&gt;
  &lt;div class="form-group"&gt;
      &lt;label for="imageName" class="col-sm-2 control-label"&gt;Name&lt;/label&gt;
      &lt;div class="col-sm-4"&gt;
          &lt;input type="text" class="form-control" id="imageName" placeholder="{{dataset.name}}" ng-model="dataset.name"&gt;
      &lt;/div&gt;
      &lt;label for="enumTypeSelect" class="col-sm-2 control-label"&gt;Type&lt;/label&gt;
      &lt;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"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!-- Child html --&gt;
  
  &lt;div class="row"&gt;
  
      &lt;!-- Create dropdown with button and list values - 
           Display value {{currentEnumType}} is not being initially updated--&gt;
      &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
          {{currentEnumType}} &lt;span class="caret"/&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a ng-click="updateCurrentEnum(enumType)"&gt;{{enumType="None Selected"}}&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li ng-repeat="enumType in enumTypes"&gt;
              &lt;a ng-click="updateCurrentEnum(enumType)"&gt;{{enumType}}&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>