title: AngularJS A-Z filter
body: <p>I've got that table created using ng-repeat <a href="http://wojtek1150.pl/files/screens/2015_03_29__22-14-19.png" rel="nofollow">http://wojtek1150.pl/files/screens/2015_03_29__22-14-19.png</a></p>
  
  <p>And I have to create filter that show me all records start from A, B or C or... letter. I tried tu use ng-click filter, but it show records that have  somewhere filtered letter.
  Any suggestions?</p>
  
  <p>Best regards, W</p>
  
  <p>@edit</p>
  
  <p>All code that I used</p>
  
  <p>JS:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['infinite-scroll']);
  myApp.controller('DemoController', function($scope) {
  
      $scope.temp = [
          &lt;?php $query = new WP_Query( array('post_type' =&gt; 'exhibitors', 'posts_per_page' =&gt; -1, 'order' =&gt; 'ASC')); ?&gt;
          &lt;?php $i = 0; if($query-&gt;have_posts()) : while($query-&gt;have_posts()): $query-&gt;the_post();
          $categories = get_the_terms( $post-&gt;ID, 'company_category' ); $cat_list = array(); foreach ( $categories as $cat ) { $cat_list[] = $cat-&gt;name; };
          $countries = get_the_terms( $post-&gt;ID, 'country' ); $ctr_list = array(); foreach ( $countries as $ctr ) { $ctr_list[] = $ctr-&gt;name; };
              echo "{";
              echo "ID: '" . $i . "',";
              echo "title: '" . get_the_title($post-&gt;ID) . "',";
              echo "content: '" . get_the_content($post-&gt;ID) . "',";
              echo "stand: '" . get_field('stand') . "',";
              echo "category: '" . $cat_list[0] . "',";
              echo "country: '" . $ctr_list[0] . "',";
              echo "},";           
          $i++; endwhile; endif; ?&gt;   
      ];  
  
      $scope.selects = [ 
          &lt;?php $query = new WP_Query( array('post_type' =&gt; 'exhibitors', 'posts_per_page' =&gt; 2, 'order' =&gt; 'ASC')); ?&gt;
          &lt;?php $i = 0; if($query-&gt;have_posts()) : while($query-&gt;have_posts()): $query-&gt;the_post();
          $categories = get_the_terms( $post-&gt;ID, 'company_category' ); $cat_list = array(); foreach ( $categories as $cat ) { $cat_list[] = $cat-&gt;name; };
          $countries = get_the_terms( $post-&gt;ID, 'country' ); $ctr_list = array(); foreach ( $countries as $ctr ) { $ctr_list[] = $ctr-&gt;name; };
              echo "{";
              echo "ID: '" . $i . "',";
              echo "title: '" . get_the_title($post-&gt;ID) . "',";
              echo "content: '" . get_the_content($post-&gt;ID) . "',";
              echo "stand: '" . get_field('stand') . "',";
              echo "category: '" . $cat_list[0] . "',";
              echo "country: '" . $ctr_list[0] . "',";
              echo "},";           
          $i++; endwhile; endif; ?&gt;   
      ];
  
      $scope.loadMore = function() {
        var last = $scope.selects.length - 1;
        for(var i = 1; i &lt;= 1; i++) {
          var ar_id = $scope.temp[last].ID;
          var ar_title = $scope.temp[last].title;
          var ar_contnet = $scope.temp[last].content;
          var ar_stand = $scope.temp[last].stand;
          var ar_category = $scope.temp[last].category;
          var ar_country = $scope.temp[last].country;
  
          $scope.selects.push({
              ID: ar_id,
              title: ar_title,          
              content: ar_content,          
              stand: ar_stand,          
              category: ar_category,          
              country: ar_country,          
          });
        }
      };  
  
      $scope.alphabets = ["", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "#"];
      //used with ng-click
      $scope.select = function ($index) {
          $scope.selected = $scope.alphabets[$index];
      }
      // used in filter
      $scope.startsWithSelected = function (value, index) {
          if ($scope.selected) {
              return value[0].toLowerCase() === $scope.selected.toLowerCase();
          } else {
              return true;
          }
  
      }
  
  });
  
  myApp.filter('unsafe', function($sce) {
      return function(val) {
          return $sce.trustAsHtml(val);
      };
  });
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;div id="exhibitors_table" ng-controller="DemoController" class="my-controller"&gt;
                  &lt;div class="search_box"&gt;&lt;label for="search"&gt;Keyword&lt;/label&gt;&lt;input id="search" ng-model="search"&gt;&lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;select ng-model="cats"
                                  ng-options="select.category for select in selects"&gt;
                              &lt;option value=""&gt;Category&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;select ng-model="ctrs"
                                  ng-options="select.country for select in selects"&gt;
                              &lt;option value=""&gt;Country&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="alphabet"&gt;
                      &lt;span ng-repeat="alphabet in alphabets"&gt;
                          &lt;a ng-click="select($index)"&gt;{{alphabet}}&lt;span&gt;All&lt;/span&gt;&lt;/a&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div ng-repeat="word in words | filter:startsWithSelected"&gt;
                      {{word}}
                  &lt;/div&gt;
  
                  &lt;table&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Company&lt;/td&gt;
                              &lt;td&gt;Stand&lt;/td&gt;
                              &lt;td&gt;Category&lt;/td&gt;
                              &lt;td&gt;Links&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr ng-repeat="select in selects | filter:search | filter:cats | filter:ctrs | filter:startsWithSelected"&gt;
                              &lt;td&gt;
                                  &lt;span class="toggle" ng-click="showme=true" ng-hide="showme"&gt;+&lt;/span&gt;
                                  &lt;span class="toggle" ng-click="showme=false" ng-show="showme"&gt;-&lt;/span&gt;
                                  &lt;h4 ng-bind-html="select.title | unsafe"&gt;&lt;/h4&gt;
                                  &lt;div ng-show="showme" class="txt" ng-bind-html="select.content | unsafe"&gt;&lt;/div&gt;
                              &lt;/td&gt;
                              &lt;td&gt;{{select.stand}}&lt;/td&gt;
                              &lt;td&gt;{{select.category}}&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;            
              &lt;/div&gt;
  </code></pre>
  
  <p>Also I've got problem with select box. When I click "category" or "country" do reset filter. All records are gone :/</p>