JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
<body  ng-app="ionicApp">

          <ion-header-bar class="bar-positive">
            <h1 class="title">Fancy Select</h1>
          </ion-header-bar>

          <ion-nav-view animation="slide-left-right">


          </ion-nav-view>

          <script id="form.html" type="text/ng-template">
            <ion-view>
              <ion-content>
                <fancy-select
                              header-text="Single"
                              allow-empty='false'
                              value="val.single"
                              text="countries_text_single"
                              items="countries">
                </fancy-select>

                <fancy-select
                              header-text="Multiple"
                              allow-empty='false'
                              value="val.multiple"
                              text="countries_text_multiple"
                              items="countries"
                              multi-select="true"            
                              >
                </fancy-select>

              </ion-content>
            </ion-view>


          </script>

          <script id="fancy-select.html" type="text/ng-template">
            <ion-list>
              <ion-item class="item-text-wrap" ng-click="showItems($event)">
                {{text}}
                <span class="item-note">
                  {{noteText}}
                  <img class="{{noteImgClass}}" ng-if="noteImg != ''" src="{{noteImg}}" />
                </span>
              </ion-item>
            </ion-list>
          </script>

          <script id="fancy-select-items.html" type="text/ng-template">
            <ion-view class="fancy-select-items modal">
       ...

CSS

fancy-select .list {
  margin: -1px 0; }

/* Items */
/* line 13, ../scss/modules/_fancy-select.scss */
.fancy-select-items {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%; }
  /* line 19, ../scss/modules/_fancy-select.scss */
  .fancy-select-items .item {
    overflow: hidden;
    /* Clearfix */ }

/* line 24, ../scss/modules/_fancy-select.scss */
.fancy-select-items label p {
  height: 32px;
  line-height: 32px; }

/* line 29, ../scss/modules/_fancy-select.scss */
.fancy-select-icon {
  float: left;
  margin-right: 10px;
  width: 30px;
  text-align: center; }

JavaScript

angular.module('ionicApp', ['ionic']).directive('fancySelect', 
    [
        '$ionicModal',
        function($ionicModal) {
            return {
                /* Only use as <fancy-select> tag */
                restrict : 'E',

                /* Our template */
                templateUrl: 'fancy-select.html',

                /* Attributes to set */
                scope: {
                    'items'        : '=', /* Items list is mandatory */
                    'text'         : '=', /* Displayed text is mandatory */
                    'value'        : '=', /* Selected value binding is mandatory */
                    'callback'     : '&'
                },

                link: function (scope, element, attrs) {

                    /* Default values */
                    scope.multiSelect   = attrs.multiSelect === 'true' ? true : false;
                    scope.allowEmpty    = attrs.allowEmpty === 'false' ? false : true;

                    /* Header used in ion-header-bar */
                    scope.headerText    = attrs.headerText || '';

                    /* Text displayed on label */
                    // scope.text          = attrs.text || '';
                    scope.defaultText   = scope.text || '';

                    /* Notes in the right side of the label */
                    scope.noteText      = attrs.noteText || '';
                    scope.noteImg       = attrs.noteImg || '';
                    scope.noteImgClass  = attrs.noteImgClass || '';
                    
                    /* Optionnal callback function */
                    // scope.callback = attrs.callback || null;

                    /* Instanciate ionic modal view and set params */

                    /* Some additionnal notes here : 
                     * 
                     * In previous version of the directive,
                     * we were using attrs.parentSelector
                     * to open the modal box within a selector. 
                   ...