Angular+JQ+Bootstrap

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.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="item in basket.items()">
            {{item}}<br /><a class="btn btn-danger btn-small" ng-click="basket.removeItem(item)">Remove item</a>
        </li>
    </ul>
    <div class="well">
        <h3>Create a new item</h3>
        New Item: {{newItem}}<br />
        <input ng-model="newItem.id" placeholder="id"><br />
        <input ng-model="newItem.name" placeholder="name"><br />
        <input ng-model="newItem.price" placeholder="price"><br />
        <input ng-model="newItem.language" placeholder="language"><br />
        <a class="btn btn-primary" ng-click="basket.addItem(newItem); newItem = {}">Create Item</a>
    </div>
</div>

JavaScript

var app = angular.module('myApp', []);

app.factory('basket', function() {
    var items = [];
    var myBasketService = {};
    
    myBasketService.addItem = function(item) {
        items.push(item);
    };
    myBasketService.removeItem = function(item) {
        var index = items.indexOf(item);
        items.splice(index, 1);
    };
    myBasketService.items = function() {
        return items;
    };
    
    return myBasketService;
});

function MyCtrl($scope, basket) {
    $scope.newItem = {};
    
    $scope.basket = basket;    
}