I think the best way is to implement a custom function to update the custom array with the filtered data whenever it changes query

. Like this:

$scope.query = '';
$scope.filteredData= angular.copy($scope.data);
$scope.updateFilteredData = function(newVal){
    var filtered = angular.copy($scope.data);
    filtered = filtered.map(function(year){ 
        year.children=year.children.map(function(month){
            month.children = $filter('filter')(month.children,newVal);
            return month;
        });
        return year;
    });
    $scope.filteredData = filtered.filter(function(year){
        year.children= year.children.filter(function(month){
            return month.children.length>0;
        });
        return year.children.length>0;
    });
}

      

        
        
        
      

    

And then your view will look like this:

    <input type="search" ng-model="query" ng-change="updateFilteredData(query)"
           placeholder="Search..." />
    <div class="year" ng-repeat="year in filteredData | orderBy:'name':true">
         <h1>{{year.name}}</h1>
        <div class="month" ng-repeat="month in year.children | orderBy:sortMonth:true">
            <h3>{{month.name}}</h3>
            <div class="project" ng-repeat="project in month.children | orderBy:'name'">
                <p>{{project.name}}</p>
            </div>
        </div>
    </div>

      

        
        
        
      

    

Example

---

Why not custom $filter

for this?

Efficiency : The nature of the cycle $diggest

will make it much less efficient. The only problem is that this solution won't be as easy to replicate as a custom one $filter

. However, this custom $filter

one will also not be very reusable as its logic will be very dependent on this particular data structure.

---

IE8 support

If you need this to work in IE8, you'll either have to use jQuery to replace functions filter

and map

make sure those functions are defined like this: (By the way: if you need IE8 support, there's absolutely nothing wrong with using jQuery for this sort of thing. )

filter

if (!Array.prototype.filter) {
  Array.prototype.filter = function(fun/*, thisArg*/) {
    'use strict';

    if (this === void 0 || this === null) {
      throw new TypeError();
    }

    var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun !== 'function') {
      throw new TypeError();
    }

    var res = [];
    var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
    for (var i = 0; i < len; i++) {
      if (i in t) {
        var val = t[i];
        if (fun.call(thisArg, val, i, t)) {
          res.push(val);
        }
      }
    }
    return res;
  };
}

      

        
        
        
      

    

map

if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {
    var T, A, k;
    if (this == null) {
      throw new TypeError(" this is null or not defined");
    }
    var O = Object(this);
    var len = O.length >>> 0;
    if (typeof callback !== "function") {
      throw new TypeError(callback + " is not a function");
    }
    if (thisArg) {
      T = thisArg;
    }
    A = new Array(len);
    k = 0;
    while(k < len) {
      var kValue, mappedValue;
      if (k in O) {
        kValue = O[ k ];
        mappedValue = callback.call(T, kValue, k, O);
        A[ k ] = mappedValue;
      }
      k++;
    }
    return A;
  };      
}

      

        
        
        
      

    

---

Acknowledgment

I want to thank JB Nizet for his feedback .