JSFiddle - React, Tailwind, and code Playground

by HugeHugh

HTML

<div ng-app="app">
    <div ng-controller="MainCtrl as vm">
    Name: <input type="text" ng-model="vm.specialName"/><button type="button" ng-click="vm.chVal()">ChVal in Controller</button>
        <foo-directive name="vm.specialName"></foo-directive>
    </div>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.4.3/angular.min.js"></script>
<style>

JavaScript

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

// main.js
function MainCtrl() {
var self = this;
self.specialName = 'a';
self.chVal = function() {
self.specialName='a';
}
}

angular
    .module('app')
    .controller('MainCtrl', MainCtrl);

// foo.js
function FooDirCtrl() {
var self = this;
self.chVal = function() {
self.name='c';
}
}

function fooDirective() {
    
    function link($scope) {
        
    }
    
    return {
        restrict: 'E',
        scope: {},
        controller: 'FooDirCtrl',
        controllerAs: 'vm',
        bindToController: {
            name: '='
        },
        template: [
            '<div><select ng-model="vm.name"><option>a</option><option>b</option><option>c</option></select><button type="button" ng-click="vm.chVal()">ChVal in Directive</button>'
        ].join(''),
        link: link
    };
}

angular
    .module('app')
    .directive('fooDirective', fooDirective)
    .controller('FooDirCtrl', FooDirCtrl);