title: AngularJS dynamic search box on same page
body: <p>I am new in AngularJS but I have basic HTML and JavaScript knowledge. </p>
  
  <p>I have a list of links on page, and a search box. I want to filter list elements dynamically according to the text typed in the box. I have found some example but they use external lists- not a list typed on same html file. </p>
  
  <p><strong>Exactly this:</strong> <a href="https://code.ciphertrick.com/demo/angularajaxsearch/" rel="nofollow noreferrer">https://code.ciphertrick.com/demo/angularajaxsearch/</a></p>
  
  <p>As you guess I cannot make filtered elements visible/unvisible like this. How can I filter them (all html codes <strong>must be in 1 page</strong> so we cannot call another js file, controller or etc.)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="bar"&gt;
      &lt;input type="text" class="search" ng-model="searchString" /&gt;
  &lt;/div&gt;
  
  &lt;ul class="data-ctrl"&gt;
                  &lt;li ng-repeat="i in berkay | searchFor:searchString"&gt;
  
                  &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul name="berkay"&gt;
    &lt;li&gt;&lt;a href="https://google.com"&gt;google&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="https://bbc.com"&gt;bbc&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="https://microsoft.com"&gt;microsoft&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Note:</strong> If there is a way with just Javascript or etc. without using angular js, it is welcome as well.</p>
  
  <p><strong>Last Edit:</strong> All 3 answers are correct and working fine right now.</p>