title: $scope.$watch function does not reflect changes?
body: <p>$scope.$watch function does not reflect changes made to $scope.Fruits.
  $scope.Fruits gets updated in HTML when respected filter is applied.
  I think it is because of the 'return' in $scope.colorFilter Function. I am not able to find any way around it.  </p>
  
  <p>Javascript is as follows:</p>
  
  <pre><code> angular.module('fruit', []);
  
  function FruitCtrl($scope) {
  $scope.fruit = [
      {'name': 'Apple', 'colour': 'Red'},
      {'name': 'Orange', 'colour': 'Orange'},
      {'name': 'Banana', 'colour': 'Yellow'}
  ];
  
  $scope.colourIncludes = [];
  
  $scope.includeColour = function(colour) {
      var i = $.inArray(colour, $scope.colourIncludes);
      if (i &gt; -1) {
          $scope.colourIncludes.splice(i, 1);
      } else {
          $scope.colourIncludes.push(colour);
      }
  }
  
  $scope.colourFilter = function(fruit) {
  
      if ($scope.colourIncludes.length &gt; 0) {
          if ($.inArray(fruit.colour, $scope.colourIncludes) &lt; 0){
            alert('hi');
              return;
          }
  
      }
  
      return fruit;
  }
  
  $scope.$watch('Fruits', function (newValue, oldValue) {
                      console.log($scope.Fruits);
                      console.log(newValue);
                      console.log(oldValue);
      }, true)
  
   }
  </code></pre>
  
  <p>HTML File:</p>
  
  <pre><code> &lt;div ng-app="fruit"&gt;
  &lt;div ng-controller="FruitCtrl"&gt;
  
      &lt;input type="checkbox" ng-click="includeColour('Red')"/&gt; Red&lt;/br/&gt;
      &lt;input type="checkbox" ng-click="includeColour('Orange')"/&gt; Orange&lt;/br/&gt;
      &lt;input type="checkbox" ng-click="includeColour('Yellow')"/&gt; Yellow&lt;/br/&gt;
  
      &lt;ul&gt;
          &lt;li ng-repeat="f in fruit | filter:colourFilter"&gt;
              {{f.name}}
          &lt;/li&gt;
      &lt;/ul&gt;
  
      Filter dump: {{colourIncludes}}
  &lt;/div&gt;
  </code></pre>
  
  <p></p>