JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<header>
<img src="http://sub1.kevinchisholm.com/blog/images/angularjs-logo-small.png" class="logo" >
<hgroup>
<h1>Getting Started With Angular.js<span>Manually Boot-Strapping Your Application<i>(Part II)</i><span></h1>
<h2>Working Example</h2>
<h3><a href="http://blog.kevinchisholm.com" target="_blank">blog.kevinchisholm.com</a></h3>
</hgroup>
</header>
<div id="main">
<!-- our HTML will be injected here -->
</div>
<script>
var template = ''
+ '<h2>Type Something In the Text-Box.</h2>'
+ '<input type="text" ng-model="myData" style="width:500px;"/>'
+ '<p class="content"><b>The Value of "myData" is: </b><span class="val">{{myData}}</span></p>';
//our boot-strapping function
function bootAngular(){
//create the Angular module
var myMod = angular.module('myApp', []);
//configure code that will execute when the module is instantiaged
myMod.run(function ($rootScope) {
$rootScope.myData = "Angular has been boot-strapped!";
$('#main').append(template);
});
//boot-strap angular!
angular.bootstrap( $('body'), ['myApp']);
};
//when the document is ready...
angular.element(document).ready(function(){
//execute our boot-strapping function
bootAngular();
});
</script>