title: How to use filter in AngularJS properly to highlight a word in all JSON?
body: <p>how to use filter function properly in angularjs to highlight a word that i type in textbox and then it highlight all word in JSON that we type. I have dimensional array JSON, which is looked like this :</p>
  
  <pre><code>    [
  
  {
  
      "id": "WEB1500001",
      "tgl_opj": "2015-08-24",
      "ket": "",
      "tgl_jth_tempo": "2015-09-07",
      "divisi": "MIYAKO         ",
      "soDetail": 
  
  [
  
  {
  
      "id": "WEB1500001",
      "kd_brg": "KAS1618B                      ",
      "harga": ​216900,
      "qty": ​500,
      "qty_si": ​170
  
  },
  {
  
      "id": "WEB1500001",
      "kd_brg": "KAS1627KB                     ",
      "harga": ​257900,
      "qty": ​300,
      "qty_si": ​0
  
  },
  {
  
      "id": "WEB1500001",
      "kd_brg": "MCM-612                       ",
      "harga": ​206400,
      "qty": ​400,
      "qty_si": ​300
  
  },
  {
  
      "id": "WEB1500001",
      "kd_brg": "MCM-507                       ",
      "harga": ​228500,
      "qty": ​400,
      "qty_si": ​400
  
  },
  {
  
      "id": "WEB1500001",
      "kd_brg": "WD-189H                       ",
      "harga": ​157900,
      "qty": ​1050,
      "qty_si": ​300
  
  },
  {
  
      "id": "WEB1500001",
      "kd_brg": "WD-290HC                      ",
      "harga": ​303200,
      "qty": ​200,
      "qty_si": ​0
  
  },
  {
  
      "id": "WEB1500001",
      "kd_brg": "MCM-509                       ",
      "harga": ​228500,
      "qty": ​200,
      "qty_si": ​100
  
  },
  {
  
      "id": "WEB1500001",
      "kd_brg": "MCM-838                       ",
      "harga": ​243200,
      "qty": ​200,
      "qty_si": ​0
  
  },
  {
  
      "id": "WEB1500001",
      "kd_brg": "BL-101PL                      ",
      "harga": ​236000,
      "qty": ​240,
      "qty_si": ​0
  
  },
  {
  
      "id": "WEB1500001",
      "kd_brg": "BL-151GF                      ",
      "harga": ​298000,
      "qty": ​240,
      "qty_si": ​240
  
  },
  {
  
      "id": "WEB1500001",
      "kd_brg": "MCG-171                       ",
      "harga": ​954800,
      "qty": ​50,
      "qty_si": ​20
  
  },
  
              {
                  "id": "WEB1500001",
                  "kd_brg": "MJG-201                       ",
                  "harga": ​870600,
                  "qty": ​50,
                  "qty_si": ​0
              }
          ]
      }
  
  ]
  </code></pre>
  
  <p>here is how i consume the json, this is my app.js :</p>
  
  <pre><code>var app = angular.module('myApp', ['ngAnimate', 'ui.router', 'ui.bootstrap'])
  
  app.config(function($stateProvider, $urlRouterProvider) {
  
      $urlRouterProvider.otherwise('/Laporan_PO_OutStanding');
  
      $stateProvider
  
  
          .state('Laporan_PO_OutStanding', {
              url: '/Laporan_PO_OutStanding',
              templateUrl: 'pooutstanding/main',
              controller : 'Hello'
          })
  
          .state('Laporan_PO_OutStanding.Laporan_PO_OutStanding_PartialDetails', {
              templateUrl: 'pooutstanding/details',
          });
  
  });
  
  app.controller('Hello', function($scope, $http, $state, $stateParams, $log) {
      $("#navigationArea").hide();
      $scope.isCollapsed = false;
      $scope.tgl_awal = '2015-08-01';
      $scope.tgl_akhir = '2015-08-31';
      $scope.kd_dealer;
      $scope.state = $state;
      $scope.stateParams = $stateParams;
  
      $scope.show = function show(){
          $("#tbl").show(500);
          $("#dateArea").show(500);
          $("#navigationArea").hide(500);
      }
  
      $scope.selectPOoutStanding = function selectPOoutStanding(tgl_awal,tgl_akhir,kd_dealer){
          $log.debug(tgl_awal);
          $log.debug(kd_dealer);
          $log.debug("hehe");
          $http.get(urlLaporan + "/"+tgl_awal+"/"+tgl_akhir + "/" + kd_dealer)
          .success(function(response){
              $scope.listPOoutStandings = response;
          });
      };
  
  
  });
  
  app.filter('highlight', function($sce) {
      return function(text, phrase) {
          if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
            '&lt;span class="highlighted"&gt;$1&lt;/span&gt;')
  
          return $sce.trustAsHtml(text)
        }
      });
  </code></pre>
  
  <p>and here is my index.html :</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
  &lt;table id="tbl" class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;No PO&lt;/th&gt;
              &lt;th&gt;Tanggal PO&lt;/th&gt;
              &lt;th&gt;Tanggal Jatuh Tempo&lt;/th&gt;
              &lt;th&gt;Divisi&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat-start="listPOoutStanding in listPOoutStandings | filter:search | orderBy:'id'" ng-bind-html="listPOoutStanding | highlight:search"&gt;
              &lt;td&gt;&lt;a ui-sref=".Laporan_PO_OutStanding_PartialDetails" ng-click="selectSingleID(listPOoutStanding.id)" class="btn btn-info"&gt;Show Detail&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;&lt;a ng-click="isCollapsed = !isCollapsed" class="expandcollapse btn btn-mini btn-primary pull-center"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;&amp;nbsp;{{listPOoutStanding.id}}&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;{{listPOoutStanding.tgl_opj}}&lt;/td&gt;
              &lt;td&gt;{{listPOoutStanding.tgl_jth_tempo}}&lt;/td&gt;
              &lt;td&gt;{{listPOoutStanding.divisi}}&lt;/td&gt;
  
          &lt;/tr&gt;
          &lt;tr ng-repeat-end=""&gt;
          &lt;td colspan="10" style="padding: 0"&gt;
            &lt;div collapse="isCollapsed"&gt;
              &lt;table class="table table-border"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;No. PO&lt;/td&gt;
                      &lt;td&gt;Kode Barang&lt;/td&gt;
                      &lt;td&gt;Qty&lt;/td&gt;
                      &lt;td&gt;Qty SI&lt;/td&gt;
                      &lt;td&gt;Harga&lt;/td&gt;
                  &lt;/tr&gt; 
                  &lt;tr ng-repeat="details in listPOoutStanding.soDetail"&gt;
                      &lt;td&gt;{{ details.id }}&lt;/td&gt;
                      &lt;td&gt;{{ details.kd_brg }}&lt;/td&gt;
                      &lt;td&gt;{{ details.qty }}&lt;/td&gt;
                      &lt;td&gt;{{ details.qty_si }}&lt;/td&gt;
                      &lt;td&gt;{{ details.harga }}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;             
            &lt;/div&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is how i do css the highlighted text, i give it yellow color :</p>
  
  <pre><code>.highlighted { background: yellow }
  </code></pre>
  
  <p>it won't highlited the text, it just filter the JSON data record, but it wont highlight the text, what i missed here?</p>