AngularJS - $filter inside controller

by Sajeetharan Sinnathurai

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid" ng-app="myapp" ng-controller="searchCtrl">
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
        <form class="form-primary text-white">
          <div class="form-group">
            <div>
              <label for="search.size">By Size (Sft)</label>
              <select name="search.size" id="search.size" ng-model="size">
                <option value="">All Size</option>
                <option value="600-1000">BELOW 1000</option>
                <option value="1001-1500">1000 - 1500</option>
                <option value="1501-2000">1500 - 2000</option>
                <option value="2001-2500">2000 - 2500</option>
                <option value="2601-3000">2500 - 3000</option>
                <option value="3001-15000">ABOVE 3000</option>
              </select>
            </div>
          </div>

        </form>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <ul class="search-result-list">
          <li ng-repeat="result in results | filter:searchSize | orderBy:name">
            <a ng-href="{{result.link}}" target="_blank" class="">
              <div class="search-thumb" style="background-image: url({{result.image}});">

              </div>
              <div class="search-meta">
                <h3 class="search-item-title">{{result.name}}</h3>

              </div>
            </a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>

CSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 5px;
}

h3 {
  font-size: 12px;
  margin-top: 0;
}

.search-thumb {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

.search-meta {
  padding-left: 5px;
}

JavaScript

var app = angular.module('myapp', []);

	app.controller('searchCtrl', ['$scope', '$http', function($scope, $http) {
	  $scope.results = [{
	    "id": 1,
	    "name": "Allergy Relief",
	    "address": "87 Waxwing Court",
	    "link": "https://purevolume.com/viverra/eget/congue/eget/semper/rutrum/nulla.jpg",
	    "image": "https://dummyimage.com/143x130.bmp/ff4444/ffffff",
	    "size": 500,
	    "type": "all"
	  }, {
	    "id": 2,
	    "name": "Mirtazapine",
	    "address": "368 Rowland Terrace",
	    "link": "https://wordpress.com/vestibulum/proin/eu/mi/nulla/ac.png",
	    "image": "https://dummyimage.com/214x184.jpg/ff4444/ffffff",
	    "size": 900,
	    "type": "all"
	  }, {
	    "id": 3,
	    "name": "Doxepin Hydrochloride",
	    "address": "86065 Washington Trail",
	    "link": "https://reference.com/orci/vehicula/condimentum/curabitur/in/libero/ut.aspx",
	    "image": "https://dummyimage.com/146x224.png/cc0000/ffffff",
	    "size": 1000,
	    "type": "all"
	  }, {
	    "id": 4,
	    "name": "Lactulose",
	    "address": "478 Lillian Point",
	    "link": "https://china.com.cn/montes/nascetur/ridiculus/mus/etiam.jsp",
	    "image": "https://dummyimage.com/218x170.bmp/cc0000/ffffff",
	    "size": 1800,
	    "type": "commercial"
	  }, {
	    "id": 5,
	    "name": "Clindamycin Phosphate",
	    "address": "995 Rowland Junction",
	    "link": "https://facebook.com/auctor/gravida.json",
	    "image": "https://dummyimage.com/113x123.png/5fa2dd/ffffff",
	    "size": 2000,
	    "type": "residential"
	  }, {
	    "id": 6,
	    "name": "Neutrogena Men Triple Protect Face",
	    "address": "4128 Columbus Circle",
	    "link": "https://ibm.com/proin/eu/mi.html",
	    "image": "https://dummyimage.com/235x184.png/cc0000/ffffff",
	    "size": 2446,
	    "type": "all"
	  }, {
	    "id": 7,
	    "name": "Ibuprofen",
	    "address": "3357 Garrison Circle",
	    "link": "https://scientificamerican.com/quam.js",
	    "image": "https://dummyimage.com/149x232.jpg/5fa2dd/ffffff",
	   ...