JSFiddle - React, Tailwind, and code Playground

by mslocum

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div ng-app="directiveTest">
<select ng-model="letter">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
    <option>F</option>
    <option>G</option>
</select>
<select ng-model="number">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
</select>

<div id="value">{{letter}} {{number}}</div>
    
</div>

JavaScript

angular.module("directiveTest",[])
.directive("select", function() {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: false,
        link: function(scope, element, oAttrs, controller) {
            element.on("keyup", function() {
                console.log(controller.$viewValue, controller.$modelValue);
                console.log(controller);
                jQuery(this).change();
                controller.$modelValue = 5
                if (!scope.$$phase) {
                    console.log('digesting');
                    scope.$digest();
                }
            })
        }
    }
});