title: AngularJS : $watch not triggered on change ($scope issue with include page)
body: <p><strong>Html:</strong></p>
  
  <pre><code>Filter: 
  &lt;input type="radio" ng-model="Type" value="Rear"&gt; Rear
  &lt;input type="radio" ng-model="Type" value="Front"&gt; Front
  &lt;br&gt;
  Select:
  &lt;name-value-select entry="entry" field="axleType" options="filterTypes"&gt;&lt;/name-value-select&gt;
  </code></pre>
  
  <p><strong>Directive:</strong></p>
  
  <pre><code>  .directive('nameValueSelect', function () {
      return {
      restrict: "E",
      scope: {
          entry: "=",
          field: "@",
          options: "=",
          onInputChange: "&amp;"
      },
      controller: function ($scope) {
  
          $scope.onChange = function () {
              console.log("selected changed");
              $scope.entry.type = $scope.option.value;
              $scope.onInputChange();
          };
  
          var getItemForValue = function (value) {
              var item = null;
              $scope.options.forEach(function (_option) {
                  if (_option.value == value) {
                      item = _option;
                  }
              });
              return item;
          };
  
          $scope.$watch("entry", function () {
              console.log("entry changed");
              $scope.option = getItemForValue($scope.entry[$scope.field]);
          }, true);
  
      },
      template: '&lt;select ng-model="option" ng-options="o.Description for o in options" ng-change="onChange()"&gt;&lt;option value="" selected="selected"&gt;Please Select &lt;/option&gt;&lt;/select&gt;'
  
  };  })
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>$scope.Description = '';
  $scope.entry = {Description: ''};
  $scope.Type = 'Front';
  $scope.entry.type = '';
  
  
  $scope.$watch('Type', function (Type) {
      $scope.filterTypes = [];
      $scope.axleTypes = new API.GetAxleTypes(function () {
          angular.forEach($scope.axleTypes, function(axleType) {
              if (axleType.Type == Type) {
                  this.push(axleType);
              }
              // if(!$scope.$$phase) $scope.$digest(); // tried this, does not have any affect
      }, $scope.filterTypes); // '}, $scope.filterTypes, true)'--&gt; did nothing for me here     
  }); 
      $scope.filterTypes.sort(function (a, b) {
          return a.Description.localeCompare(b.Description);
      });
  }); // '}, true)' --&gt; did nothing for me here
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>The custom select control does initially populate with items of Type 'Front', and would also populate with 'Rear' if I made Rear the default.</p>
  
  <p><strong>However, when toggling between radio buttons, the watch function is not called and the select does not populate with items meeting newly selected filter type.</strong></p>
  
  <p>//////////////////////////////////////////////////////
  <strong>Narrowed Down the Problem:</strong>
  /////////////////////////////////////////////////////</p>
  
  <p>When moving this to a stand alone project, I discovered my code above works :-(</p>
  
  <p><strong>Here is the original select NOT as a custom directive:</strong></p>
  
  <pre><code>    &lt;select ng-model="$parent.selectedFrontAxle" ng-options="axleType.Description for axleType in axleTypes | filterByType: 'Front' | orderBy:'Description'"  id="frontAxles" class="formRequire" required&gt;            
          &lt;option value="" selected&gt;Select Axle Type ..&lt;/option&gt;  
      &lt;/select&gt;
  </code></pre>
  
  <p><strong>Here is the select control as a custom directive:</strong></p>
  
  <pre><code>  &lt;name-value-select   entry="entry" field="axleType" options="filterTypes"&gt;&lt;/name-value-select&gt;
  </code></pre>
  
  <p>Clearly this is the issue: <strong>"ng-model="$parent.selectedFrontAxle"</strong></p>
  
  <p>If I take the directive "name-value-select" and move it to the parent page, in lieu of a include statement, it works. </p>
  
  <p>But that is not what I want. So I need to leave it in the include page. </p>
  
  <p>Yet, if I take the <strong>ng-model="$parent.selectedFrontAxle"</strong> and add it to ANY element on the include page, nothing works. </p>
  
  <p>Any with no <strong>ng-model="$parent.selectedFrontAxle"</strong>, still nothing works.</p>
  
  <p>I can see the issue is scope yet I do not see how to correct it.</p>
  
  <p>Ughh!!! Still no solution.</p>
  
  <p>//<br>
  //<br>
  //////////////////////////////////////////////////////////////
   <strong>Mark Rajcok</strong>
  //////////////////////////////////////////////////////////////</p>
  
  <p>As always thanks for your help. Although, I do not think I made myself clear on point 2 when I said I had scenarios where I wanted the code to pre-filter and not the user. I figured it out though. So for anyone looking to abstract out controls via a directive, and, as in this case, where a filtering process is performed both by the user and in code, here is the plunker solution:</p>
  
  <p><strong><a href="http://plnkr.co/edit/tnXgPKADfr5Okvj8oV2S?p=preview" rel="nofollow">http://plnkr.co/edit/tnXgPKADfr5Okvj8oV2S?p=preview</a></strong></p>