title: AngularJs - forEach scope array - not working
body: <p><strong>I recognize I am doing something stupid, so please indulge me:</strong></p>
  
  <p><strong>Html:</strong></p>
  
  <pre class="lang-html prettyprint-override"><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>Controller:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$scope.$watch('Type', function (Type) {
      $scope.filterTypes = [];
      if ($scope.axleTypes == undefined || $scope.axleTypes == []) {
          $scope.axleTypes = API.GetAxleTypes;
      }
      angular.forEach($scope.axleTypes, function (type) {
          console.log('axleType: ' + type);
          console.log('Type: ' + type);
          if (axleType.Type == Type) {
              this.push(axleType);
          }
      }, $scope.filterTypes);
      $scope.filterTypes.sort(function (a, b) {
          return a.Description.localeCompare(b.Description);
      });
  });
  </code></pre>
  
  <p>I cannot even loop thru the axleTypes array in my watch function. It appears it is not picking up a collection which is odd because it bypasses populating the axleTypes if undefined or [].</p>
  
  <p>I am doing something so stupid, I can't see it.</p>
  
  <p><strong>Update: Per Jason's request</strong></p>
  
  <p><strong>(1) My angular controller:</strong></p>
  
  <pre><code>$scope.entry = {
      Description: ''
  };
  $scope.Type = 'Front';
  $scope.entry.type = '';
  
  $scope.$watch('Type', function (Type) {
      $scope.filterTypes = [];
      $scope.axleTypes = new API.GetAxleTypes(function (axleTypes) {
          angular.forEach($scope.axleTypes, function (axleType) {
              if (axleType.Type == Type) {
                  this.push(axleType);
                  }
          }, $scope.filterTypes);
      });
  
      $scope.filterTypes.sort(function (a, b) {
          return a.Description.localeCompare(b.Description);
      });
  });
  </code></pre>
  
  <p><strong>(2)My 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>No more errors Jason, however, when I toggle the two radio buttons nothing happens, ie, Front Axles still show when I choose the Rear axle radio button. Ughh.</p>