AngularJS: Facets in a Search Grid

    Sometime back I really needed this code however it came a little too late and unfortunately didn't make it into the final product. However I have since then built a complete explain showing how to hand facets with little javascript code and with a whole lot of functionality!

Requirements
Load appropriate facets, make a search. Update the UI, reload page if necessary but scale up for a single page application. Make things bookmarkable but don't lose that awesomeness from SPA's.

Example
http://jsfiddle.net/t7kr8/211/ - I forget where I found this but its probably buried somewhere in my resources.

My Example
https://fassetar.github.io/blog-examples/catalog-facets/

Javascript code

var myApp = angular.module('myApp', []);
myApp.controller('mainController', function($scope) {
  $scope.items = [{
          item:"apples", 
          flag: true
        }, {
          item:"oranges", 
          flag: true
        }, {
          item:"pears",
          flag: false 
        }];
  $scope.itemsUnchanged = angular.copy($scope.items);
  $scope.allNeedsClicked = function () {
      var newValue = !$scope.allNeedsMet();
      for (var i = 0; i < $scope.items.length; i++) {
          $scope.items[i].flag = newValue;
      }
  };

  $scope.allNeedsMet = function () {
      var needsMet = [];
      for (var i = 0; i < $scope.items.length; i++) {
          if ($scope.items[i].flag === true)
              needsMet.push(true);
      }
      return (needsMet.length === $scope.items.length);
  };
  
  $scope.update = function() {
      if (angular.equals($scope.items, $scope.itemsUnchanged)) {
          return "Not Changed";
      } else {
          return "Changed";
      }
  };
  $scope.url = function(){
    var url = [];
    //url = $scope.items[1].item;
    angular.forEach($scope.items, function(key, value) {
        if(key.flag)
          url.push(key.item);
    });
    return url.toString();
  }
});

Html Code

    <h1>Catalog Facets</h1>
    {{update()}}
    <ul>
      <li><input type="checkbox" ng-click="allNeedsClicked()" ng-checked="allNeedsMet()"/>All
      <label></label>
        <ul ng-repeat="i in items">
          <li><input type="checkbox" ng-model="i.flag"/>{{i.item}}</li>
        </ul>
      </li>
    </ul>
    <label>Single value Url Query:</label>/?fq={{url()}}
    <label style="float:left">Multi value Url Query:/?</label>
    <div style="float:left" ng-repeat="i in items">
    <div ng-if="i.flag">fq={{i.item}}
            <span ng-if="items[$index+1].flag || items[$index+2].flag">&</span></div>
    </div>

This is where I will implement the example but for now I have not included it yet.
It is mostly included and I only need to hookup the backend, however I'm working getting it live.
Project: https://github.com/fassetar/catalog

Resources
search - Multiple facets per field with Solr - Stack Overflow
Pretty URLs in AngularJS: Removing the # ♥ Scotch
https://docs.angularjs.org/api/ng/function/angular.copy - used in the first example.
c# - URL with multiple parameters as a query string in ASP.NET - Stack Overflow
java - Handling multiple values for a single query parameter in a rest webservice url and handling them using hibernate criteria - Stack Overflow