Angular: Empty Fiddle

http://angularjs.org/

by marco_m_alves

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc10.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-controller="ListCtrl">
    <h4>Select entry from list</h4>
    <table class="table table-bordered">
        <tr ng-repeat='contact in contacts' ng-click='selectContact(contact)'>
            <td class="centered">{{contact.id}}</td>
            <td class="centered">{{contact.name}}</td>
        </tr>
    </table>
</div>
<br>
<br>
<div ng-controller="EditCtrl">
    <div>
        <h4 ng-show="contact">Edit selected entry</h4>
        <input ng-show="contact" type="text" ng-model="contact.name">
    </div>
    <button class="btn btn-primary" ng-show="contactChanged" ng-click="updateContact(contact)">Update changes</button>
</div>

CSS

.centered {text-align: center;}

JavaScript

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




myApp.factory("Contacts", function($rootScope){
    
    // private vars
    var contacts = [
        { id: 1, name: "Marco"},
        { id: 2, name: "Alves"}            
    ];
    
    var index = {
        1: contacts[0],
        2: contacts[1]
    }
    
    var selectedContact = undefined;
    
    var fillWith = function(dest,src){
        for (key in src){
            console.log(key);
            dest[key] = src[key];
        }
    };
    
    // exposed vars and methods
    var Contacts = {};
    
    Contacts.ON_CONTACT_SELECT = "on_contact_select";
    
    Contacts.selectContact = function(contact){
        selectedContact = contact;
        $rootScope.$broadcast(Contacts.ON_CONTACT_SELECT);
    };
    
    Contacts.getSelectedContact = function(){
        return _.clone(selectedContact);
    };
    
    Contacts.updateSelectedContact = function(contact){
        console.log("filling " + selectedContact.name + " with " + contact.name);
        fillWith(index[selectedContact.id], contact);
    };
    
    Contacts.list = function(){
        return contacts;
    };
    
    return Contacts;
});

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function ListCtrl($scope, Contacts) {
    $scope.contacts = Contacts.list();
    
    $scope.selectContact = function(contact){
        Contacts.selectContact(contact);
    };
}

function EditCtrl($scope, Contacts) {
    
    $scope.contact = undefined;
    
    $scope.$on(Contacts.ON_CONTACT_SELECT, function(){
        $scope.contact = Contacts.getSelectedContact();
    });
    
    $scope.contactChanged = false;
    
    $scope.$watch("contact", function(newVal, oldVal){
        if (newVal && oldVal) {
            $scope.contactChanged = true;
        }
    }, true);
    
    $scope.updateContact = function(contact){
        Contacts.updateSelectedContact($scope.contact);
        $scope.contactChanged = false;
       ...