Custom directive

Here it is:

    (function() {
    'use strict';

    angular
        .module('starter')
        .directive('nameList', nameList);

    function nameList() {
        var directive = {
            restrict: 'AEC',
            templateUrl: '/components/nameList/nameList.template.html',
            scope: {
            },
            link: linkFunc,
            controller: Controller,
            controllerAs: 'vm',
            bindToController: true
        };

        return directive;

        function linkFunc(scope, el, attr, ctrl) {

        }
    }

    Controller.$inject = ['Names'];

    function Controller(Names) {
        var vm = this;

        activate();

        function activate() {
          Names.getAllNames(function(allNames) {
            vm.names = allNames;
          });
        }
    }
})();

The template:

<div>
  <div class="list list-inset">
    <label class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
      <input ng-model="filters.searchText" placeholder="Search" type="text">
    </label>
  </div>

  <ion-list>
    <ion-item collection-repeat="name in vm.names | orderBy:'tilltalsnamn' | filter:{tilltalsnamn: filters.searchText, gender: filters.gender}">
      <div class="row">
        <div class="col">
          {{name.tilltalsnamn}}
        </div>
        <div class="col">
          <i class="ion-{{name.gender}}"></i>
        </div>
      </div>
    </ion-item>
  </ion-list>
</div>