Angular+JQ+Bootstrap

by andytjoslin

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.0rc10/angular-1.0.0rc10.js"></script>
<div ng-controller="MyCtrl">
    <thingy ng-repeat="thing in stuff" value="thing"></thingy>
</div>

JavaScript

angular.module('myApp', []).directive('thingy', function($compile) {
    return {
        restrict: 'E',
        link: function(scope, elm, attrs) {
            var newElm=angular.element(
                '<div style="border: 1px solid black; padding: 5px; margin: 5px;">'+
                '<input ng-model="'+attrs.value+'">'+
                '<h3>{{'+attrs.value+'}}</h3>'+
                '</div>'
            );
            elm.append( $compile(newElm)(scope) );
            console.log(elm, scope);
        }
    };
});

function MyCtrl($scope) {
    $scope.stuff = ['tomatoes', 'apples', 'bananas'];
}