JSFiddle - React, Tailwind, and code Playground

by nicholasstephan

HTML

<div ng-app="MyApp">
    <div ng-controller="MyObjCtrl">
        <h1>{{name}}</h1>
        <div tags="tags">
            <ul>
                <li ng-repeat="tag in allTags">
                    <input type="checkbox"/>{{tag}}
                </li>
            </ul>
            <button ng-click="add()">Add Qux</button>
        </div>
        <ul>
            <li ng-repeat="tag in tags">{{tag}}</li>
        </ul>
    </div>
</div>

JavaScript

angular.module('MyApp', [])
.controller('MyObjCtrl', function($scope) {
    $scope.name = "Foo";
    $scope.tags = ['Bar'];
})
.directive('tags', function() {
    return {
        scope: {
            selectedTags: '=tags'
        },
        link: function(scope) {
            console.log(scope);
            scope.allTags = ['Bar', 'Baz'];
            scope.add = function() {
                scope.selectedTags.push('Qux');
                scope.allTags.push('Qux');
            };
        }
    };
});