gistfile1.html

<apex:page showHeader="false" sidebar="false" expires="0" cache="false" docType="html" controller="TargetX_Base.TX_CommunitiesBase" extensions="AppStartController">
<apex:composition template="{!defaultTemplate}">
        
<!-- use head for extra css or important js before dom load -->
<apex:define name="head"/>

<!-- set subheading tag to disable the boilerplate heading -->
<apex:define name="subheader"/>

<apex:define name="content">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-sanitize.js"></script>
    <script src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.2/textAngular-sanitize.min.js'></script>
    <script src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.2/textAngular.min.js'></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"/>

    <script type="text/javascript">

        var appStart = angular.module('appStart', ['ui.bootstrap','textAngular','ngSanitize']);
        
        appStart.controller('appStartController', function($scope,$timeout,$sce) {
            
            $scope.fields = [
                {
                    label: "Program",
                    value: "",
                    field_api: "TargetX_SRMb__Program__c",
                    options: [
                        {process: "Undergrad", label: "Biology", value: "Biology"},
                        {process: "Undergrad", label: "Political Science", value: "Political Sci"},
                        {process: "Grad", label: "Biology", value: "Biology"},
                        {process: "Grad", label: "Grad Only", value: "Grad Only"}
                    ]
                },
                {
                    label: "Concentration",
                    value: "",
                    field_api: "TargetX_SRMb__Anticipated_Major__c",
                    options: [
                        {process: "Undergrad", label: "Frog Dissection", value: "Frog Dissection"},
                        {process: "Undergrad", label: "Political Science", value: "Political Sci"},
                        {process: "Grad", label: "Biology", value: "Biology"},
                        {process: "Grad", label: "Grad Only", value: "Grad Only"}
                    ]
                }       
            ];
            
            $scope.updateProcesses = function () {
                $scope.processes = {};
                angular.forEach($scope.fields, function (f, key) {
                    angular.forEach(f.options, function(option, optionKey) {
                        if (key == 0 || $scope.processes[option.process] != undefined)
                        if (option.value == f.value)
                        $scope.processes[option.process] = {
                            label: option.process
                        };
                    });
                });

            }
            $scope.updateProcesses();
            
            $scope.processFilter = function (v, i) {
                return !Object.keys($scope.processes).length || $scope.processes[v.process] != undefined;
            }
            
            $scope.processFilterGenerator = function (field) {
                return function (v, i) {
                    console.log('EDITING FOR THIS FIELD '+field);
                    return !Object.keys($scope.processes).length || $scope.processes[v.process] != undefined;
                }
            }
            
        });
        
        
        /* taken from ui.filters */
        
        
        /**
 * Filters out all duplicate items from an array by checking the specified key
 * @param [key] {string} the name of the attribute of each object to compare for uniqueness
 if the key is empty, the entire object will be compared
 if the key === false then no filtering will be performed
 * @return {array}
 */
appStart.filter('unique', function () {

  return function (items, filterOn) {

    if (filterOn === false) {
      return items;
    }

    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
      var hashCheck = {}, newItems = [];

      var extractValueToCompare = function (item) {
        if (angular.isObject(item) && angular.isString(filterOn)) {
          return item[filterOn];
        } else {
          return item;
        }
      };

      angular.forEach(items, function (item) {
        var valueToCheck, isDuplicate = false;

        for (var i = 0; i < newItems.length; i++) {
          if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
            isDuplicate = true;
            break;
          }
        }
        if (!isDuplicate) {
          newItems.push(item);
        }

      });
      items = newItems;
    }
    return items;
  };
});
        
        
    </script>

    <div ng-app="appStart" ng-controller="appStartController">
        
        <div ng-repeat="f in fields">
            <h3>{{ f.label }}</h3>
            <select class="form-control style_2" ng-model="f.value" 
             ng-options="item.value as item.label for item in f.options | filter:($index > 0 ? processFilterGenerator(f) : undefined) | unique:'value' | orderBy:'label.toString()'"
             ng-change="updateProcesses()" />
        </div>
        
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6" ng-repeat="process in processes">
                <div class="col-item">
                    <span class="ribbon_course"></span>
                    <div class="photo">
                        <a href="#"><img src="{!$resource.targetx_theme}/img/poetry.jpg" alt=""/></a>
                        <div class="cat_row"><a href="#">{{process.label}}</a><span class="pull-right"><i class=" icon-clock"></i>6 Days</span></div>
                    </div>
                    <div class="info">
                        <div class="row">
                            <div class="course_info col-md-12 col-sm-12">
                                <h4>{{process.label}}</h4>
                                <p> Lorem ipsum dolor sit amet, no sit sonet corpora indoctum, quo ad fierent insolens. Duo aeterno ancillae ei. </p>
                                <div class="rating">
                                    <i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class=" icon-star-empty"></i>
                                </div>
                                <div class="price pull-right">99$</div>
                            </div>
                        </div>
                        <div class="separator clearfix">
                            <p class="btn-add"> <a href="apply_2.html"><i class="icon-export-4"></i> Subscribe</a></p>
                            <p class="btn-details"> <a href="course_details_1.html"><i class=" icon-list"></i> Details</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    
</apex:define>

<!-- replace footer newsletter subscribe -->
<apex:define name="footer">
    <style>
        footer {
            background: #005b7f;
            padding-top: 20px;
        }

        <apex:outputText escape="false" value="{!customCss}"/>

    </style>
</apex:define>

</apex:composition>
</apex:page>