AngularJS dynamic search box on same page
<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>