Angular: Empty Fiddle

http://angularjs.org/

by GruffBunny

HTML

<div ng-controller="MainController">
    <p>tags {{tags[0]}}</p>
    <tags-select tags="tags"></tags-select>
</div>

JavaScript

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

app.controller('MainController', function( $scope ) {
  $scope.tags = [
    'Lorem Ipsum',
    'Dolor Sit'
  ];
});

app.directive('tagsSelect', function() {
  return {
    scope: {
      'tags': '='
    },
    restrict: 'E',
    template: '<tag ng-repeat="tag in tags" name="tag"></tag>',
    transclude: true
  };
});

app.directive('tag', function() {
  return {
    scope: {
      'name': '='
    },
    restrict: 'E',
    template: '{{name}} <span class="remove-tag" ng-click="remove(tag)">X</span>',
    link: function( scope, element, atrrs ) {
      scope.remove = function( tag ) {
        // TODO: Remove tag from parent & scope...
      };
    }
  };
});