Angular: Empty Fiddle

http://angularjs.org/

by jlaw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.2.1/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.js"></script>
<div ng-controller="notificationsCtrl">Hello, {{name}}!
    <br>
    <notifications></notifications>
    <button ng-click="addToFactory()" class="btn btn-default">Add To Factory</button>
    <button ng-click="removeFromFactory()" class="btn btn-default">Remove From Factory</button>
</div>

CSS

.notificationsBox {
    background-color:#414e68;
    border:1px solid black;
    height:30px;
    width:30px;
    border-radius:4px;
    line-height:30px;
    color:white;
    text-align:center;
    font-size:19px;
}

JavaScript

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

app.directive('notifications', ['$templateCache', 'notificationsFactory', function ($templateCache, Factory) {
    return {
        restrict: 'E',
        scope: {},
        template: $templateCache.get('notifications/notifications.tpl.html'),
        link: function (scope, ele, attrs) {
            scope.getSize = function () {
                return Factory.get().length;
            }
            scope.$on('$NOTIFICATIONADDED', function (event, data) {
                ele.fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);
                scope.getSize();
            });
            scope.$on('$NOTIFICATIONREMOVED', function (event, data) {
                console.log('We\'re refreshing notifications');
                scope.getSize();
            });
        }
    };
}])
    .factory('notificationsFactory', ['$rootScope', '$q', '$location', function ($rootScope, $q, $location) {
    // This variable will hold the state. (there is only 1 per factory -- singleton)  
    var notifications = {};

    var data = {};
    data.tasks = [];
    notifications.add = function (task) {
        data.tasks.push(task);
        console.log(data.tasks);
        $rootScope.$emit('$NOTIFICATIONADDED');
    };
    notifications.remove = function (task) {
        console.log("Removing task", task);
        index = _.find(data.tasks, task);
        if (index) {
            index = _.indexOf(data.tasks, index);
            data.tasks.splice(index, 1);
            $rootScope.$emit('$NOTIFICATIONREMOVED');
            console.log(data.tasks);
        }

    };
    notifications.get = function () {
        return data.tasks;
    };

    return notifications;
}])
    .controller('notificationsCtrl', ['$scope', 'notificationsFactory', function ($scope, Factory) {
    var num = 0;
    $scope.addToFactory = function () {
        Factory.add({
            'test': '' + num++
        });
    }
    // console.log("We've added a cool test",...