Angular+JQ+Bootstrap

by yahyaKACEM

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="Ctrl1">
    <h2>Ctrl1 - List</h2>
    <ul>
        <li ng-repeat="item in list()">{{item}}</li>
    </ul>
</div>
<hr />
<div ng-controller="Ctrl2">
    <h2>Ctrl2 - Add</h2>
    <form ng-submit="add(newItem); newItem = '';">
        <input type="text" placeholder="new item..." ng-model="newItem">
        <br />
        <input class="btn" type="submit">
    </form>
</div>

JavaScript

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

app.factory('items', function() {
    var items = [];
    var itemsService = {};
    
    itemsService.add = function(item) {
        items.push(item);
    };
    itemsService.list = function() {
        return items;
    };
    
    return itemsService;
});

function Ctrl1($scope,items) {
    $scope.list = items.list; 
}

function Ctrl2($scope, items) {
    $scope.add = items.add;
}