title: How to filter an array of objects using AngularJS?
body: <p><strong>Background</strong></p>
  
  <p>I've been teaching myself AngularJS this past week. I created a basic application that gets Twitch data for each Twitch channel and creates an array of "channel" objects that holds the following properties; name, logo url, streaming (yes or no), and channel url. So far I've used Angular to print each channel object by its properties to a table using the ng-repeat directive (love that feature). </p>
  
  <p><strong>Problem/ Question</strong></p>
  
  <p>I want to be able to sort the list of objects in the table whenever a user clicks the online and offline buttons thus filtering the channels by its "streaming" property. Unfortunately, I can't seem to figure out how to filter the channels by its property. Can anyone help? </p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;div ng-controller="MainController" &gt;
    &lt;div class="container" id="test"&gt;
      &lt;div class="row"&gt;
          &lt;header&gt;
              &lt;ul id="mainMenu"&gt;
                  &lt;li class="activeMenu" ng-click="filterGo('streaming')"&gt;All&lt;/li&gt;
                  &lt;li ng-click="filterGo('streaming')"&gt;Online&lt;/li&gt;
                  &lt;li ng-click="filterGo('streaming')"&gt;Offline&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/header&gt;
          &lt;div class="center-block" &gt;
          &lt;table class="table table-hover" &gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class="text-center"&gt;Logo&lt;/th&gt;
                      &lt;th class="text-center"&gt;Channel&lt;/th&gt;
                      &lt;th class="text-center"&gt;Online&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr ng-repeat="channel in twitchChannels | filter:filtered"   ng-click="setSelected();"&gt;
                      &lt;td &gt;&lt;img id="size" ng-src="{{ channel.logo }}"&gt;&lt;/td&gt;
                      &lt;td &gt;{{ channel.user }}&lt;/td&gt;
                      &lt;td &gt;{{ channel.streaming }}&lt;/td&gt;
                  &lt;/tr&gt;
               &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var arr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var channels = [];
  var count = 0;
  var online = "";
  
  // channel object 
  function Channel(user, name, logo, streaming) {
      this.user = user;
      this.name = name;
      this.logo = logo;
      this.streaming = streaming;
      this.url = "https://www.twitch.tv/" + this.name;
  }
  
  var app = angular.module('myApp', []);
  
  
  app.controller('MainController', function($scope, $http, $window) { 
      // loops through array of channels 
      for (var i = 0; i &lt; arr.length; i++) {
  
          (function(i) { 
  
              $http.get("https://wind-bow.gomix.me/twitch-api/users/" + arr[i]).success(function(data) {
  
                  var channel = data.display_name;
                  var name = data.name;
                  var logo = data.logo;
  
                  $http.get("https://wind-bow.gomix.me/twitch-api/streams/" + arr[i]).success(function(json) {
                      var streaming = (json.stream === null) ? false : true;
                      if(streaming) {
                          online = "YES";
                          channels[count] = new Channel(channel, name, logo, online);
                      } else {
                          online = "NO";
                          channels[count] = new Channel(channel, name, logo, online);
                      }
                      count++;
                  });
              });
           })(i);
      }
  
      $scope.twitchChannels = channels;
  
      // if channel row is clicked take user to url 
      $scope.setSelected = function() {
          $scope.selected = this.channel.url;
          $window.open($scope.selected);
      };
  
       // Need help here! 
       $scope.filterGo = function(x) {    
          $scope.filtered = x;
      }
  
  });
  </code></pre>
  
  <p>Here is the a link for reference:<a href="http://codepen.io/bryanpleblanc/pen/jBBmgN" rel="nofollow noreferrer">http://codepen.io/bryanpleblanc/pen/jBBmgN</a> </p>