JSFiddle - React, Tailwind, and code Playground

by whit1440

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<div id="App" ng-controller="ctrl">
    <select id="sel" class="form-control" select2 name="country"
    select-selection="client.primary_address.country" select-options="name in client.countries" >
         <option value="">Select Country</option>
    </select>
    <div>Selected: {{client.primary_address.country}}</div>
</div>

JavaScript

var app = angular.module("app", []);
app.controller("ctrl", function($scope, $timeout) {
    // start with defaults
    $scope.client = { 
        primary_address: {
            country: ""
        }, 
        countries: []
    };
    // update at some later time
    $timeout(function(){
        $scope.client.primary_address.country = "Canada";   
        $scope.client.countries = [
                {name: "Canada"},
                {name: "USA"},
                {name: "France"}
                ];
    }, 1000);
});
app.directive("select2",function($timeout,$parse){
    return {
        restrict: 'AC',
        link: function(scope, element, attrs) {
            var options = [],
                el = $(element),
                angularTriggeredChange = false,
                selectOptions = attrs["selectOptions"].split(" in "),
                property = selectOptions[0],
                optionsObject = selectOptions[1];
            // watch for changes to the defining data model
            scope.$watch(optionsObject, function(n, o){
                var data = [];
                // format the options for select2 data interface
                for(var i in n) {
                    var obj = {id: i, text: n[i][property]};
                    data.push(obj);
                }
                el.select2({data: data});
                // keep local copy of given options
                options = n;
            }, true);
            // watch for changes to the selection data model
            scope.$watch(attrs["selectSelection"], function(n, o) {
                // select2 is indexed by the array position,
                // so we iterate to find the right index
                for(var i in options) {
                    if(options[i][property] === n) {
                        angularTriggeredChange = true;
                        el.val(i).trigger("change");
                    }
                }
            }, true);
            // Watch for changes to the select...