JSFiddle - React, Tailwind, and code Playground

by Canet Robern

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="MyApp">
	<div ng-controller="MyController">
		<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
		<div class="modal fade" id="myModal" role="dialog">
    		<div class="modal-dialog" aria-hidden="true">
    
				<div class="modal-content">
					<div class="modal-header">
						Modal
					</div>
					<div class="modal-body">
						<ul id="add-item-list">

						</ul>
					</div>
					<div class="modal-footer">
						<button add-item-line class="btn btn-info btn-lg">
							Add list
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>

JavaScript

var myApp = angular.module('MyApp', []);
myApp.controller('MyController', function($scope){


})
.directive('addItemLine', function($compile){
    return function(scope, element, attrs){
        element.bind("click", function(){
            console.log('button clicked');
            scope.itemLineCount++;
            angular.element(document.getElementById('add-item-list'))
            .append($compile(
                "<li></li>")(scope));
        });
    };
})