main.js file

angular.module('nikoInLondon.services', ['ngResource']).
    factory('Photo', function($resource, $q) {
        var Photo = $resource('photos/:photoId', { photoId: '@_id'});
        var cache;
        return {
            getPhotos: function() {
                var def = $q.defer();
                if (cache) {
                    def.resolve(cache);
                } else {
                    Photo.query(function(res) {
                        cache = res;
                        def.resolve(cache);
                    });
                }
                return def.promise;
            },
            getPhotoObject: function() {
                return Photo;
            }
        };
    }).
    factory('Comment', function($resource) {
        return $resource('photos/:photoId/comments', { photoId: 'photoId'});
    });

angular.module('nikoInLondon.directives', []).
    directive('photoGrid', function() {
        var linkFn = function(scope, element, attrs) {
            element.masonry({
                itemSelector: attrs.itemSelector,
                columnWidth: 240,
                animationOptions: {
                  duration: 400
                }
            });
        }
        return {
            restrict: 'E',
            link: linkFn,
            scope : {
                itemSelector: '=',
                photos: '='
            }
        }
    }).
    directive('photoNew', function(Photo) {
        var linkFn = function(scope, el, attrs) {
            var PhotoObject = Photo.getPhotoObject();
            scope.photo = new PhotoObject;
            scope.submitPhoto = function() {
                scope.photo.save(function(res) {
                    Photo.getPhotos().then(function(photos) {
                        photos.push(res);
                        el.remove();
                    });
                });
            }
        };
        return {
            templateUrl: 'views/photo-new.html',
            restrict: 'E',
            scope : true,
            link: linkFn
        };
    }).
    directive('photo', function() {
        return {
            templateUrl: 'views/photo-single.html',
            transclude: true,
            restrict: 'E',
            scope : {
                model: '='
            }
        }
    }).
    directive('photoModal', function(Comment, $location) {
        return {
            restrict: 'E',
            templateUrl: 'views/photo-modal.html',
            scope: {
                selectedPhoto : '=model'
            },
            link: function(scope, el, attrs) {
                el.on('hidden', function() {
                    scope.$apply(function() {
                        $location.path('/');
                    });
                });
                scope.submitComment = function() {
                    scope.comment.$save({ photoId: scope.selectedPhoto._id }, function(res){
                        scope.selectedPhoto.comments.push(res);
                        scope.comment = new Comment;
                    });
                }
                scope.$watch('selectedPhoto', function(e) {
                    if (!e) {
                        el.hide();
                        el.modal('hide');
                    } else {
                        el.show();
                        el.modal('show');
                        scope.comment = new Comment;
                    }
                });
            }
        }
    });

angular.module('nikoInLondon.controllers', ['nikoInLondon.services']).
    controller('MainController', function($scope, $window, $routeParams, Photo, Comment) {
        Photo.getPhotos().then(function(res) {
            $scope.photos = res;
            if ($routeParams.photoId) {
                $scope.photos.forEach(function(el) {
                    if (el._id === $routeParams.photoId) $scope.selectedPhoto = el;
                });
                $window.document.title = "Niko In London | " + $scope.selectedPhoto.title;
            }
        });
        $window.document.title = "Niko In London | All Photos";
    });

angular.module('nikoInLondon', ['nikoInLondon.controllers', 'nikoInLondon.directives', 'nikoInLondon.services']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', { templateUrl: 'views/main.html', controller: 'MainController'});
    $routeProvider.when('/photos/:photoId', {templateUrl: 'views/main.html', controller: 'MainController' });
    $routeProvider.otherwise({redirectTo: '/'});
  }]);

test output

info: Testacular server started at http://localhost:8080/
info (launcher): Starting browser Chrome
warn (launcher): Chrome have not captured in 5000 ms, killing.
info (Chrome 24.0 (Mac)): Connected on socket id oxx84zxbojv3qiEUKRON
Chrome 24.0 (Mac) Niko In London Niko In London List View Controller should build the title based on the selected photo FAILED
  Expected false to be truthy.
	Error: Expected false to be truthy.
	    at /Users/danielpiros/Desktop/niko-in-london/test/client.js:79:61
	    at Object.invoke (/Users/danielpiros/Desktop/niko-in-london/public/lib/angular/angular.js:2809:28)
	    at workFn (/Users/danielpiros/Desktop/niko-in-london/test/angular-mocks.js:1731:20)
	    at window.jasmine.window.inject.angular.mock.inject (/Users/danielpiros/Desktop/niko-in-london/test/angular-mocks.js:1718:30)
	    at null.<anonymous> (/Users/danielpiros/Desktop/niko-in-london/test/client.js:77:13)
Chrome 24.0 (Mac) Niko In London Niko In London Directives should have a photo element represents the image given a model FAILED
	Expected 0 to equal 1.
	Error: Expected 0 to equal 1.
	    at null.<anonymous> (/Users/danielpiros/Desktop/niko-in-london/test/client.js:111:61)
Chrome 24.0 (Mac) Niko In London Niko In London Directives should have a photo detail element if clicked FAILED
	Expected '' to equal 'none'.
	Error: Expected '' to equal 'none'.
	    at null.<anonymous> (/Users/danielpiros/Desktop/niko-in-london/test/client.js:117:40)
	Expected undefined to be truthy.
	Error: Expected undefined to be truthy.
	    at null.<anonymous> (/Users/danielpiros/Desktop/niko-in-london/test/client.js:129:42)
	TypeError: Cannot set property 'body' of undefined
	    at null.<anonymous> (/Users/danielpiros/Desktop/niko-in-london/test/client.js:130:39)
Chrome 24.0 (Mac): Executed 7 of 7 (3 FAILED) (0.972 secs / 0.287 secs)

unit test file

describe('Niko In London', function() {

    var httpBackend;
    beforeEach(module('nikoInLondon.directives'));
    beforeEach(module('nikoInLondon.services'));
    beforeEach(module('nikoInLondon.controllers'));

    beforeEach(module('views/photo-single.html'));
    beforeEach(module('views/photo-modal.html'));

    beforeEach(inject(function($httpBackend) {
        httpBackend = $httpBackend;
        httpBackend.whenGET('photos').respond([
            {
                "comments": [],
                "date_added": "2013-01-02T20:11:00.396Z",
                "title": "Sow B3",
                "path": "https://niko-in-london-testing.s3.amazonaws.com/images/A_3.JPG?Expires=1357246904&AWSAccessKeyId=AKIAJVXDGWZHB4W25BNQ&Signature=EklACjwuw76VTvU%2BRrOdmfgcPO8%3D",
                "_id": "50e49454471aaa4f4a000003"
            },
            {
                "comments": [{
                    "body": "bella questa foto!",
                    "userId": "daniel-pyrathon",
                    "date_added": "2013-01-03T00:49:46.027Z"
                }],
                "date_added": "2013-01-02T20:11:00.396Z",
                "title": "Lorem Ipsum",
                "path": "https://niko-in-london-testing.s3.amazonaws.com/images/A_3.JPG?Expires=1357246904&AWSAccessKeyId=AKIAJVXDGWZHB4W25BNQ&Signature=EklACjwuw76VTvU%2BRrOdmfgcPO8%3D",
                "_id": "50e49454471aaa4f4a000004"
            }
        ]);
        httpBackend.whenPOST('photos/50e49454471aaa4f4a000003/comments').respond({
            body: 'your nice!',
            userId : 'daniel-pyrathon',
            date_added : new Date
        });
    }));
    describe('Niko In London List View Controller', function() {

        var scope, controller;
        beforeEach(inject(function($rootScope, $controller, $httpBackend) {
            scope = $rootScope.$new();
            controller = $controller;
        }));

        it('should create a photos model with 2 photos', function() {
            ctrl = controller('MainController', {$scope: scope});
            httpBackend.flush()
            expect(scope.photos.length).toEqual(2);
        });

        it('should be able to create comment children', function() {
            inject(function(Comment) {
                var c = new Comment({
                    body: 'your nice!'
                });
                c.$save( {photoId : '50e49454471aaa4f4a000003'} );
                httpBackend.flush();
                expect(c.date_added).toBeTruthy();
            });
        });

        it('should change the title', function() {
            ctrl = controller('MainController', {$scope: scope});
            expect(scope.selectedPhoto).toBeFalsy();
            inject(function($window) {
                expect($window.document.title).toEqual('Niko In London | All Photos');
            });
        });

        it('should build the title based on the selected photo', function() {
            ctrl = controller('MainController', {$scope: scope, $routeParams : {
                photoId : "50e49454471aaa4f4a000003"
            }});
            httpBackend.flush();
            inject(function($window, Comment) {
                expect(scope.selectedPhoto).toBeTruthy();
                expect(scope.newComment instanceof Comment).toBeTruthy();
                expect($window.document.title).toEqual('Niko In London | Sow B3');
            });
        });
    });

    describe('Niko In London Directives', function() {

        var scope, compile;

        beforeEach(inject(function($rootScope, $compile) {
            scope = $rootScope.$new();
            compile = $compile;
        }));

        it('should have a photo-grid element that does masonry', function() {
            scope.nums = [1,2,3,4];
            var el = '<photo-grid item-selector="li"> <li ng-repeat="num in nums">{{ num }}</li> </photo-grid>';
            var res = compile(el)(scope);
            expect(angular.element(res).css('position')).toEqual('relative');
        });
        it('should have a photo element represents the image given a model', function() {
            inject(function($templateCache) {
                debugger;
            });
            scope.photo = {
                title: 'Hello World',
                path: '/images/hello-world.png'
            };
            var el = '<photo model="photo"></photo>';
            var res = compile(el)(scope);
            scope.$digest();
            expect(angular.element(res).find('img').length).toEqual(1);
        });
        it('should have a photo detail element if clicked', function() {
            var el = '<photo-modal model="selectedPhoto"></photo-modal>';
            var res = compile(el)(scope);
            scope.$digest();
            expect(res.css('display')).toEqual('none');

            scope.selectedPhoto = {
                _id: '50e49454471aaa4f4a000003',
                title: 'Hello World',
                path: '/images/hello-world.png',
                comments: []
            };
            scope.$digest();
            expect(res.css('display')).toNotEqual('none');

            var isolateScope = res.scope();
            expect(isolateScope.comment).toBeTruthy();
            isolateScope.comment.body = "Hello World";
            isolateScope.submitComment();
            httpBackend.flush()
            expect(scope.selectedPhoto.comments.length).toEqual(1);
            expect(isolateScope.comment.body).toBeFalsy();
        });

    });

});