JSFiddle - React, Tailwind, and code Playground

by Shaun Scovil

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<main ng-app="sandbox">
    <example foo="FOO" bar="BAR"></example>
</main>

JavaScript

(function() {
    'use strict';
    
    angular.module('sandbox', [])
        .controller('ExampleController', ExampleController)
        .directive('example', exampleDirectiveFactory)
    ;
    
    function ExampleController($filter) {
        var vm = this;
        
        vm.foo = $filter('lowercase')(vm.foo); // this is undefined
        vm.bar = $filter('lowercase')(vm.bar); // this doesn't work
        vm.baz = $filter('lowercase')(vm.bar); // this works
    }
    
    function exampleDirectiveFactory() {
        var bindings = {
            foo: '=',
            bar: '@'
        }
        
        return {
            bindToController: true,
            controller      : 'ExampleController',
            controllerAs    : 'vm',
            scope           : bindings,
            template        : 'foo={{vm.foo}}<br />bar={{vm.bar}}<br />baz={{vm.baz}}'
        };
    }
    
})();