cara membuat filter seperti bbm dengan angular js

bagai mana cara fillter seperti aplikasi bbm dengan angular js sebelum nya saya sudah membuat filter tapi kok gambar nya ada 2 kode html

<div ng-app="starter">
<ion-view view-title="jus amma">
  <div ng-controller="cariCtrl">
  <!-- <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" ng-model="hasil" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav> -->
  <ion-content>
    <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" ng-model="hasil" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>
    <ion-list >
    	<!-- <a href="#/tab/solat"><div class="cirkel"></div></a>
    	<h3 class="h3-top">doa solat rukuk</h3> -->
      <div ng-repeat="dn in data | filter:hasil | orderBy:'id' ">
    	 <ion-item nav-clear menu-close href="#/anabah">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">{{dn.surat}}
                </h3>
          </ion-item>
          <ion-item nav-clear menu-close href="#/anabah">
                <div class="cirkel"></div>
                <h3  class="h3-top" style="margin-top: 25px; margin-left: 100px;">{{dn.surat}}
                </h3>
          </ion-item>
          <ion-item nav-clear menu-close href="#/anabah">
                <div class="cirkel"></div>
                <h3  class="h3-top" style="margin-top: 25px; margin-left: 100px;">{{dn.naaziat}}
                </h3>
          </ion-item>
      </div>
          <!-- <ion-item  nav-clear menu-close href="#/naaziaat">
                <div class="cirkel"></div>
                <h3 class="h3-top " style="margin-top: 10px; margin-left: 100px;"ng-repeat="dn in data | filter:hasil | orderBy:'id' ">{{dn.naaziat}}</h3>
          </ion-item> -->
      </div>
    </ion-list>
    </ion-content>
         <!--  <ion-item nav-clear menu-close href="#/abasah">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">abasah</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/at-takwer">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">at-Takweer</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Infitaar">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Infitaar</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Mutaffiffeen">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Mutaffiffeen</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/Inshiqaaq">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">Inshiqaaq</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Burooj">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Burooj</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/at-Taariq">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">at-Taariq</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Alaa">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Alaa</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Ghaashiyah">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Ghaashiyah</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Fajr">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Fajr</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Balad">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Balad</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/ash-Shams">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">ash-Shams</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Layl">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Layl</h3>
           </ion-item><ion-item nav-clear menu-close href="#/ad-Duhaa">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">ad-Duhaa</h3>
           </ion-item>

           <ion-item nav-clear menu-close href="#/ash-Sharh">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">ash-Sharh</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/at-Teen">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">at-Teen</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Alaq">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Alaq</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Qadr">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Qadr</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Bayyinah">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Bayyinah</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/az-Zalzaalah">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">az-Zalzaalah</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Aadiyaat">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Aadiyaat</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Qaariah">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;"> al-Qaariah</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/at-Takaathur">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">at-Takaathur</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Asr">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Asr</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Humazah">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Humazah</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Feel">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Feel</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/Quraysh">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">Quraysh</h3>
           </ion-item><ion-item nav-clear menu-close href="#/al-Maaun">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Maaun</h3>
           </ion-item>

           <ion-item nav-clear menu-close href="#/al-Kawthar">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Kawthar</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Kaafirun">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Kaafirun</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/an-Nasr">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">an-Nasr</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Masad">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Masad</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/al-Ikhlaas">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">al-Ikhlaas</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/ al-Falaq">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;"> al-Falaq</h3>
           </ion-item>
           <ion-item nav-clear menu-close href="#/an-Naas">
                <div class="cirkel"></div>
                <h3 class="h3-top" style="margin-top: 25px; margin-left: 100px;">an-Naas</h3>
           </ion-item> -->
    </ion-list>
    <!--al-Ikhlaas
      <a href="#/tab/solat"><div class="cirkel"></div></a>
    	<h3 class="h3-top">doa solat rukuk</h3>
    </ion-lal-Masad</ion-content>an-Naas
</div>

folder java scrip

var app = angular.module('starter', [])

app.controller('cariCtrl', function($scope){
      $scope.data = [{ surat:'anabah'},
                    { naaziat:'naaziat'}];

});