title: Filtering objects in AngularJS makes my string objects turns every string to a char array
body: <p>I'm trying to filter data by a user input to a Textbox.</p>
  
  <p><strong>When the page loads, all the data is displayed properly.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/JahB1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JahB1.png" alt="Data displayed properly"></a></p>
  
  <p><strong>When typing text into the Textbox, all the string changes to a char array -</strong></p>
  
  <p><a href="https://i.stack.imgur.com/UIvzA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UIvzA.png" alt="When typing text into the Textbox"></a>  </p>
  
  <p><strong>After deleting the text in the Textbox the data looks like that -</strong></p>
  
  <p><a href="https://i.stack.imgur.com/EfaLr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EfaLr.png" alt="After deleting the text in the Textbox"></a></p>
  
  <p>This is the code I'm using -</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="FormatsApp" ng-controller="LinksController"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;label class="label-to-left"&gt;Search Formats: &lt;/label&gt;
      &lt;input type="text" name="txtSearchFormats" ng-model="txtSearchFormats" /&gt;
      &lt;div id="formatsBox"&gt;
          &lt;div ng-repeat="i in items"&gt;{{ i.name | filter:txtSearchFormats }}&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Angualr --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var formatsApp = angular.module('FormatsApp', []);
          formatsApp.controller('LinksController', function LinksController($scope) {
              $scope.items = [{ name: "Hello" }, { name: "Goodbye" }];
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What went wrong here?</p>