Angular: Empty Fiddle

http://angularjs.org/

by Pratik Bhattachary

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
  <div ng-repeat="types in roofs">

    <button ng-click="setFilter(types)" class="btn btn-primary" type="button">{{types.label}}</button>

</div>
FILTER
{{myFilter}}

<div>

  <button ng-repeat="variants in roofInsulation | filter: myFilter" class="btn btn-secondary" type="button">{{variants.label}}</button>

</div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($rootScope) {
    $rootScope.roofs = [
    { 
      type: 'roof',
      label: 'Pitched Roof'
    },
    { 
      type: 'attic',
      label: 'Floor of Attic' 
    },
    { 
      type: 'test',
      label: 'Only for test' 
    }
  ];

$rootScope.setFilter = function(types) {
	$rootScope.myFilter = {target: types.type};
}

<!-- Roof insulation types -->
  $rootScope.roofInsulation = [
    { 
      target: ['roof', 'attic'],
      type: 'between_rafters',
      label: 'Between Rafters'
    },
    { 
      target: ['roof', 'test'],
      type: 'between_rafters_counter_batten',
      label: 'Between Rafters With A Counter Batten' 
    },
    { 
      target: ['roof', 'test'],
      type: 'between_rafters_calibel',
      label: 'Between Rafters With Calibel' 
    },
    { 
      target: 'roof',
      type: 'between_rafters_thermal_laminate',
      label: 'Between Rafters With Thermal Laminate' 
    },
    { 
      target: 'attic',
      type: 'test',
      label: 'Attick'
    }
  ];
}