title: Binding Multiple ng-model to a single HTML element
body: <p>I have created this table which can be filtered with the search box. I also want to highlight the term that was entered in the search box. So far, I got i t to work but in separate input boxes. It does the one but not the other.I guess I need to pass two ng-models to the input box in order to filter and highlight the matching term? Or Do I have to pass filter in ng-show?  This fiddle <a href="http://jsfiddle.net/gion_13/ZDWdH/2/" rel="nofollow">http://jsfiddle.net/gion_13/ZDWdH/2/</a>  is very similar but it works on list. I tried that example but I guess it does not work on arrays. Please excuse any newbie errors.</p>
  
  <p>Here is my angular code:</p>
  
  <pre><code>&lt;script&gt;
  var app = angular.module('myApp',['ngSanitize']).filter('highlight', function () {
    return function (text, search, caseSensitive) {
      if (search || angular.isNumber(search)) {
        text = text.toString();
        search = search.toString();
        if (caseSensitive) {
          return text.split(search).join('&lt;span class="ui-match"&gt;' + search + '&lt;/span&gt;');
        } else {
          return text.replace(new RegExp(search, 'gi'), '&lt;span class="ui-match"&gt;$&amp;&lt;/span&gt;');
        }
      } else {
        return text;
      }
    };
  });
  app.controller('MainCtrl',function($scope,$http) {
  
   $scope.orderByField = 'Activity_ID';
    $scope.reverseSort = false;
  
  $scope.items=[];//removes undefined length errors
  
  
      $scope.loadPeople = function() {
          var httpRequest = $http({
              method: 'GET',
              url: 'https://url_local/time/timesheet_json.php'
  
          }).success(function(data, status) {
              $scope.items = data;
              console.log($scope.items);
          });
  
      };
  $scope.loadPeople();
  });
  &lt;/script&gt;
  
  &lt;html&gt;
  &lt;input ng-model="query" /&gt;
  &lt;input ng-model="hightlightText"/&gt; 
  //Removed code to highlight specific sections
  &lt;tbody&gt;
        &lt;tr ng-repeat="item in items | orderBy:orderByField:reverseSort"    ng-show="([item] | filter:query).length"&gt;
          &lt;td ng-bind-html="item.Activity_Matrix_ID | highlight:highlightText"&gt;{{item.Activity_Matrix_ID}}&lt;/td&gt;
          &lt;td ng-bind-html="item.Activity_ID | highlight:highlightText"&gt;{{item.Activity_ID  }}&lt;/td&gt;
          &lt;td ng-bind-html="item.Activity_Date | highlight:highlightText"&gt;{{item.Activity_Date}}&lt;/td&gt;
          &lt;td ng-bind-html="item.Activity_Category | highlight:highlightText"&gt;{{item.Activity_Category}}&lt;/td&gt;
          &lt;td ng-bind-html="item.Activity_Hours | highlight:highlightText"&gt;{{item.Activity_Hours}}&lt;/td&gt;
          &lt;td ng-bind-html="item.Activity_Project | highlight:highlightText"&gt;{{item.Activity_Project}}&lt;/td&gt;
          &lt;td ng-bind-html="item.Activity_Description | highlight:highlightText"&gt;{{item.Activity_Description}}&lt;/td&gt;
  &lt;/html&gt;
  
  
  JSON Response: [{"Activity_Matrix_ID":"163","Activity_ID":"131","Activity_Date":"2062-02-16","Activity_Category":"Maintanence","Activity_Project":"All Projects","Activity_Description":"Json data ","Activity_Hours":"2"},{"Activity_Matrix_ID":"161","Activity_ID":"129","Activity_Date":"2044-02-25","Activity_Category":"Tech Support","Activity_Project":"All Projects","Activity_Description":"Dummy dummy ","Activity_Hours":""}]
  </code></pre>