JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="MainController">
        <select ng-model="currentThing" ng-options="object.name for object in things">
            <option value="">--choose a thing--</option>
        </select>
        <div id="thisShouldFade" option-fader="currentThing.data">{{show.data}}</div>
    </div>
</div>

JavaScript

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

app.controller('MainController', function ($scope) {
    $scope.hello = {
        name: 'hello friend'
    };
    $scope.things = [{
        name: "Thing One",
        data: "This is the data for thing one"
    }, {
        name: "Thing Two",
        data: "This is the data for thing two"
    }, {
        name: "Thing Three",
        data: "This is the data for thing three"
    }];

    $scope.currentThing = null;
    $scope.show = {
        data: null
    };
});

app.directive('optionFader', function () {
    return {
        link: function link(scope, element, attrs) {
            scope.$watch(attrs.optionFader, function (newValue, oldValue) {
                if (oldValue == newValue && newValue === undefined) return;

                var qelem = $(element);
                if (!scope.show.data) {
                    qelem.fadeOut(0);
                    scope.show.data = newValue;
                    qelem.fadeIn(1000);
                } else {
                    qelem.fadeOut(1000, function () {
                        if (newValue) {
                            scope.show.data = newValue;
                            scope.$apply();
                        }
                        qelem.fadeIn(1000);
                    });
                }
            });
        }
    };
});