JSFiddle - React, Tailwind, and code Playground

by spechackers

HTML

<div ng-app="app">
    <div ng-controller="MainCtrl as vm">
        {{ vm.name }}
        <foo-directive name="vm.name"></foo-directive>
        <button ng-click="vm.changeScopeValue()">
        changeScopeValue
        </button>
    </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() {
    this.name = 'Vinoth Initial';
    this.changeScopeValue = function(){
        this.name = "Vinoth has Changed"
    }
}

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

    // foo.js
    function FooDirCtrl() {

    }

    function fooDirective() {

        return {
            restrict: 'E',
            scope: {
                name: '='
            },
            controller: 'FooDirCtrl',
            controllerAs: 'vm',
            template:'<div><input ng-model="name"></div>',
            bindToController: true
        };
    }

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