Angular+JQ+Bootstrap

by hannahh

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</h2>
    Slices Left: <input ng-model="pizza.slicesLeft">
</div>
<hr />
<div ng-controller="Ctrl2">
    <h2>Ctrl2</h2>
    Slices Left: {{pizza.slicesLeft}}
</div>

JavaScript

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

app.factory('franksPizza', function() {
    var pizzaService = {};
    pizzaService.slicesLeft = 7;
        
    return pizzaService;
});

function Ctrl1($scope, franksPizza) {
    $scope.pizza = franksPizza;
}

function Ctrl2($scope, franksPizza) {
    $scope.pizza = franksPizza;
}