Ionic custom directive controller

The view template where i am using this template

        <ion-view>
       <ion-refresher
            pulling-text="Pull to refresh..."
            on-refresh="doRefresh()">
        </ion-refresher>
            <ion-list>
         <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats"                        type="item-text-wrap" href="#/tab/{{chat.id}}">
    <img ng-src="http://ionicframework.com/img/docs/mcfly.jpg">
    <h2>{{chat.name}}</h2>
    <p>{{chat.lastText}}</p>
    <i class="icon ion-chevron-right icon-accessory"></i>
    <ion-option-button class="button-positive" ng-click="remove(chat)">
     Hide
    </ion-option-button>
    <ngif ="$index%5==0" browseto info="customer"> </browseto>
  </ion-item>

       </ion-list>
      <ion-infinite-scroll
     on-infinite="loadMore()"
  distance="1%">
        </ion-infinite-scroll>
        </ion-scroll>
   </ion-view>

controller is

          .controller('ChatsCtrl', function($scope, Chats) {

      $scope.chats = Chats.all();
      $scope.customer = Chats.all();
     $scope.remove = function(chat) {
      Chats.remove(chat);
       };
       })