JSFiddle - React, Tailwind, and code Playground

by softvar

HTML

<div ng-app="directivesApp" ng-controller="directiveCtrl">
    <label>Geography</label><input type="text" ng-model="geography"/>
    <custom-Demo data-geography="geography"></custom-Demo>
</div>

JavaScript

angular.module('directivesApp', [])
.controller('directiveCtrl', function ($scope) {
    $scope.geography = 'IND - Country';
})
.directive('customDemo',function(){
    return{
        restrict:'E',
        template:'Geography : <b>{{geography}}</b>',
        scope: {
            geography: '='
        }
    }
});