Angularjs: Filtering using multiple combobox directives on the same data set

Question

I'm trying to use a directive twice and filter using the options created by the directives. For some reason the chemicalsFilter isn't working as expected. If I use either of the filters on the ng-repeat it works but using both together isn't working. I'm wondering if this could be a scope issue within the directives but each seem to return the correct data. It outputs in the console as I expect but the filtering just doesn't work as expected.

Any ideas? If I can get this sorted it will be so much easier creating multiple combo boxes in my project.

This is my example plnkr: http://plnkr.co/edit/FTPdSSiKSOZiWptfJzuC?p=preview

Original example (both examples do the same thing): http://democode.6te.net/filterusingdirectives/

        <div ng-controller="resultsCtrl">

            <div ng-controller="chemicals">

                <combo-box url="/filterusingdirectives/php/getChemicals.php" list-name="Select Chemicals" loading-message="loading chemicals ..." combo-box-directive-selected-values="getSelectedChemicalValues"></combo-box>

            </div>
            <div ng-controller="letters">

                <combo-box url="/filterusingdirectives/php/getLetters.php" list-name="Select Letters" loading-message="loading letters ..." combo-box-directive-selected-values="getSelectedLetterValues"></combo-box>

            </div>

            <div ng-repeat="result in results | chemicalsFilter:selectedChemicalValues | lettersFilter:selectedLetterValues">
                letterId:   {{result.letterId}}
                <br />
                chemicalId: {{result.chemId}}
                <br />
                name: {{result.name}}
                <br /><br />
            </div>
        </div>  

Answer 1

inner loops must be replaced with respective selected("selectedLetterValues and selectedChemicalValues") values instead of results.

lettersFilter :

for (var i = 0; i < results.length; i++) {
 for (var j = 0; j < selectedLetterValues.length; j++) {
    .......
 }
}

chemicalsFilter :

for (var i = 0; i < results.length; i++) {
 for (var j = 0; j < selectedChemicalValues.length; j++) {
    .......
 }
}

Updated : I don't see any other issue apart from logic. May be you have debugged it and thought why filters is executing multiple times, might be this is an issue. here is the explanation

Why your code is not working?

when you click Acetic acid ( for sake of comfort we will go with letterId only)

in chemicalsFilter(results, selectedChemicalValues):
input  results=[letterID:10, letterId:20, litterId:30]
       selectedChemicalValues=[letterId:20, litterId:30]

       for (var i = 0; i < results.length; i++) {
        for (var j = 0; j < results.length; j++) {
           .......
        }
       }

output filteredResults = [letterId:20, litterId:30]

in lettersFilter(filteredResults, selectedLetterValues):
input results=[letterId:20, litterId:30]
      selectedLetterValues=[letterID:10, letterId:20, litterId:30]

      for (var i = 0; i < results.length; i++) {
       for (var j = 0; j < results.length; j++) {
           .......
       }
      }

output filteredResults = [letterId:20]

In lettersFilter both outer loop and inner loop are checking size on results.length so it will never get chance to compare 3rd index, so it retruns 2nd index which contains Acetone