AngularJS Sticky Notes

Thanks Ali Mills for the inspiration! http://jsfiddle.net/alimills/rCbMv And Thomas Burleson for some great feedback on the code.

by simpulton

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-app="myApp">
    <script type="text/ng-template" id="partials/notebook-directive.html">
    <ul class="thumbnails">
        <li ng-repeat="note in notes">
            <my-note class="span2 thumbnail" delete="deleteNote(note.id)" note="note">
                <button class="btn btn-large close pull-right" ng-click="delete()">&times;</button>
                <hr/>
                <p>{{note.title}}</p>
            </my-note>
        </li>
    </ul>
    </script>

    <div ng-controller="NotebookCtrl">
        <div class="page-header">
            <h1>AngularJS Sticky Notes</h1>
        </div>
        <div class="form-actions">
            <div class="input-append">
                <form ng-submit="addNote(noteTitle);resetForm();">
                    <input class="span3" ng-model="noteTitle" size="16" type="text" placeholder="Add a note">
                    <button class="btn btn-success" type="button"
                        ng-disabled="!noteTitle" ng-click="addNote(noteTitle);resetForm();">Add Note
                    </button>   
                </form>
            </div>
        </div>
        <my-notebook notes="getNotes()" ondelete="deleteNote(id)"></my-notebook>
    </div>
</div>

CSS

.ui-state-highlight { background-color: #EEEEEE; }

JavaScript

angular.module('myApp', [])
    .service('notesService', function () {
        var data = [
            {id:1, title:'Note 1'},
            {id:2, title:'Note 2'},
            {id:3, title:'Note 3'},
            {id:4, title:'Note 4'},
            {id:5, title:'Note 5'},
            {id:6, title:'Note 6'},
            {id:7, title:'Note 7'},
            {id:8, title:'Note 8'}
        ];

        return {
            notes:function () {
                return data;
            },
            addNote:function (noteTitle) {
                var currentIndex = data.length + 1;
                data.push({
                    id:currentIndex, title:noteTitle
                });
            },
            deleteNote:function (id) {
                var oldNotes = data;
                data = [];

                angular.forEach(oldNotes, function (note) {
                    if (note.id !== id) data.push(note);
                });
            }
        };
    })
    .directive('myNotebook', function () {
        return {
            restrict:"E",
            scope:{
                notes:'=',
                ondelete:'&'
            },
            templateUrl:"partials/notebook-directive.html",
            controller:function ($scope, $attrs) {
                $scope.deleteNote = function (id) {
                    $scope.ondelete({id:id});
                }
            }
        };
    })
    .directive('myNote', function () {
        return {
            restrict:'E',
            scope:{
                delete:'&',
                note:'='
            },
            link:function (scope, element, attrs) {
                var $el = $(element);

                $el.hide().fadeIn('slow');

                $('.thumbnails').sortable({
                    placeholder:"ui-state-highlight", forcePlaceholderSize:true
                });
            }
        };
    })
    .controller('NotebookCtrl', ['$scope', 'notesService', function ($scope, notesService) {
       ...