var data = [ {name: 'jug-montpellier', url: 'http://jug-montpellier.org/', date: 'tous les 3eme mercredi', icon: 'http://www.jug-montpellier.org/public/images/logo.png'}, {name: 'devoxx', url: 'http://www.devoxx.fr/', date: '20 Avril 2016', icon: 'https://pbs.twimg.com/profile_images/587897238568968192/NMdj4LCC.png'}, {name: 'KiwiParty', url: 'http://kiwiparty.fr/', date: 'Juin 2016', icon: 'http://kiwiparty.fr/xmedia/kiwiparty/2015/logo-kiwiparty.svg'}, {name: 'mix-IT', url: 'http://www.mix-it.fr/', date: 'Avril 2016', icon: 'http://www.mix-it.fr/public/images/mini-mixit.png'} ]; var app = angular.module('app', []); app.directive('confDashboard', [ 'LittleSrv', function (LittleSrv) { return { restrict: 'E', template: '<count-directive confs="ctrl.confs"></count-directive>'+ '<little-directive confs="ctrl.confs" on-add-conf="ctrl.addConf(newConf)"></little-directive>', scope: true, bindToController: {}, controllerAs: 'ctrl', controller: [function() { this.confs = LittleSrv.getConfs(); this.addConf = function(newConf) { LittleSrv.addConf(newConf); }; }] }; } ]); app.directive('littleDirective', [ function () { return { restrict: 'E', template: '<ul class="confs">'+ '<li class="conf" ng-repeat="conf in myCtrl.confs">'+ '<img class="conf-img" ng-src="{{conf.icon}}" />'+ '<a class="conf-url" href="{{conf.url}}" target="_blank">{{conf.name}} le {{conf.date}}</a>'+ '</li>'+ '<li class="conf">'+ '<input class="conf-input" type="text" ng-model="myCtrl.newConf.icon" placeholder="src image" />'+ '<input class="conf-input" type="text" ng-model="myCtrl.newConf.name" placeholder="titre" />'+ '<input class="conf-input" type="text" ng-model="myCtrl.newConf.url" placeholder="url" />'+ '<input class="conf-input" type="text" ng-model="myCtrl.newConf.date" placeholder="date" />'+ '<input class="conf-input" type="button" value="Ok" ng-click="myCtrl.addNewConf()" />'+ '</li>'+ '</ul>', scope: true, bindToController: { confs: '=', onAddConf: '&' }, controllerAs: 'myCtrl', controller: [function() { this.newConf = {}; this.addNewConf = function() { this.onAddConf({newConf: this.newConf}); this.newConf = {}; }.bind(this); }] }; } ]); app.factory('LittleSrv', [ function() { var confs = data; return { getConfs: function() { return confs; }, addConf: function(newConf) { confs.push(newConf); } } } ]); app.directive('countDirective', [ 'LittleSrv', function (LittleSrv) { return { restrict: 'E', template: '{{myCtrl.confs.length}} confs', scope: true, bindToController: { confs: '=' }, controllerAs: 'myCtrl', controller: [function() {}] }; } ]);
<div class="app" ng-app="app"> <conf-dashboard></conf-dashboard> </div>