How to highlight data if search text matched with available text in the array?
<p>I have <code>$scope.data</code> that is already displaying to the screen using <code>ng-repeat</code> , I have a input where user can search from <code>$scope.data</code> , So i created filter if user search text matched with <code>$scope.data</code> highlight that text ,its not throwing any exception but also not highlighting the text, I am fairly new to angularjs filters help will be much appreciated. Thanks in advance.</p>

<p>ctrl.js</p>

<pre><code>$scope.data = ["Lorem Ipsum is simply dummy text", "Lorem Ipsum is simply dummy text"];
</code></pre>

<p>main.html</p>

<pre><code>&lt;div class="row search-input-margin"&gt;
    &lt;div class="col-md-12 form-group"&gt;
        &lt;div class="col-md-3"&gt;
            &lt;label for="search"&gt;Search Logs:&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="col-md-9"&gt;
            &lt;input type="text" class="form-control" id="search" ng-model="vm.searchLog"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

    &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
                &lt;ul style="list-style: none;"&gt;
                    &lt;li ng-repeat="message in data track by $index"&gt;&lt;span&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/span&gt;&lt;span&gt;{{message}}&lt;/span&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;ul&gt;
                    &lt;!-- filter code --&gt;
                    &lt;div ng-repeat="item in data | filter:vm.searchLog"
                         ng-bind-html="item | highlight:vm.searchLog"&gt;
                    &lt;/div&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>filter.js</p>

<pre><code>angular.module('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>