title: Angular filtering array of object if certain property is false?
body: <p><a href="https://i.stack.imgur.com/7SXPZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7SXPZ.png" alt="enter image description here"></a>
  so i have an array of object i am ng-repeating and works beautifully, but i want to list the array of objects that have a  property value of 'true' . i feel like the built in angualr filter should be sufficient. But cant get it to work  </p>
  
  <p>here is my attempt . Basically i only want asset.name , asset.status etc of the objects that have disabled property 'true'</p>
  
  <pre><code>&lt;md-virtual-repeat-container id="vertical-container" ng-show="$ctrl.infiniteAssets.getLength() &gt; 0 &amp;&amp; $ctrl.switch"&gt;
  
        &lt;md-list&gt;
          &lt;md-list-item  class="list-page" md-on-demand md-virtual-repeat="asset in $ctrl.infiniteAssets | assetsFilter:$ctrl.searchValue | filter:{disabled:true}:true" ng-click="$ctrl.loadDetail(asset)"&gt;
            &lt;span class="search-status" style="border-left-color:{{asset.statusColor}};"&gt;&lt;/span&gt;
            &lt;p &gt;{{asset.name}} &lt;/p&gt;                  
            &lt;label hide-xs ng-if="asset.disabled" class="ng-animate-disabled"&gt;
              &lt;md-chips&gt;
                &lt;md-chip &gt;{{'LABELS.DISABLED' | translate}}&lt;/md-chip&gt;
              &lt;/md-chips&gt;
            &lt;/label&gt;
            &lt;label &gt;&lt;i&gt;{{asset.status || 'UNKNOWN'}}&lt;/i&gt;&lt;/label&gt;
               &lt;md-button  aria-label="Delete Asset" class="md-icon-button md-warn" layout-padding ng-click="$ctrl.deleteAsset(asset)"&gt;
                     &lt;md-icon md-svg-icon="delete" class="modelTrashIcon"&gt;&lt;/md-icon&gt;
                &lt;/md-button&gt; 
  
            &lt;md-divider&gt;&lt;/md-divider&gt;
          &lt;/md-list-item&gt;
        &lt;/md-list&gt;
      &lt;/md-virtual-repeat-container&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $onInit = () =&gt; {
          this.swtich           = false;
          this.hideToolbarTools = false;
          this.searchOpen       = false;
          this.componentList    = [];
          this.alertCount       = 0;
          this.loading          = false;
          this.disableTitle     = false;
          this.searchValue      = "";
          this.first            = true;
          this.settings         = {
                          printLayout: true,
                          showRuler: true,
                          showSpellingSuggestions: true,
                          presentationMode: 'edit'
          };
  
          this.global = this.$rootScope;
  
          this.$rootScope.$on('transform-toolbar-open', () =&gt; { 
             //hide toolbar controls on mobile
              
              if(this.$mdMedia('xs')){
                  this.hideToolbarTools = true;        
              }else{
                  this.hideToolbarTools = false
              }
          })
  
          this.$rootScope.$on('transform-toolbar-close', () =&gt; { 
              //show toolbar controls
              this.hideToolbarTools = false;
          })
          this.loadAssets()
      }
  
  
        loadAssets = () =&gt; {
  
          var self = this;
          self.infiniteAssets = {
              numLoaded_: 0,
              toLoad_: 0,
              items: [],
              pageNum:1,
              virtualIndex:0,
  
              getItemAtIndex: function (index) {
                  this.virtualIndex=index;
  
                  if (index &gt; this.numLoaded_) {
                      this.fetchMoreItems_(index);
                      return null;
                  }
                  return this.items[index];
              },
  
              // Required.
              getLength: function () {
                  if (this.virtualIndex &gt; this.numLoaded_) {
                      return this.numLoaded_ ;
                  }else{
                      return this.numLoaded_ + 5 ;
                  }
              },
  
              fetchMoreItems_ : function (index) {
                  if (this.toLoad_ &lt; index) {
                      self.loading = true;
                      this.toLoad_ += 20;
                      self.siAsset.getAssets(this.pageNum++,20)
                          .then(angular.bind(this, function (assets) {
                              //this.objLength = assets.length;
                              if(! assets.statusCode){
                                  this.items = this.items.concat(assets);
                                  this.toLoad_ = this.items.length;
                                  this.numLoaded_ = this.toLoad_;
                              }
                              self.loading = false;
                          }))
                  }
              }
              
          };
          console.log('check',this.infiniteAssets)
      }</code></pre>
  </div>
  </div>
  </p>