Angular+JQ+Bootstrap

by mmansion

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0rc8/angular-1.0.0rc8.js"></script>
<div ng-controller="ExpensesCtrl">
    <form id="expensesform">
        <input type="text" ng-model="expense.name" />
        <input type="text" ng-model="expense.amount" />        
    </form>

    <button ng-click="add()">Add</button>
    
    {{expense | json}}
</div>

JavaScript

angular.module('myApp', []);

function ExpensesCtrl($scope, $compile) {
        
    $scope.expense = { };  
    $scope.add = function() {
        $("#expensesform").append( $compile("<input type='text' ng-model='expense.age' />")($scope) );    
    };    
}