Angular: Empty Fiddle

http://angularjs.org/

by rocketegg0

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-controller="main">
    <m-tag tags="tags" read="false"></m-tag>
</div>

JavaScript

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

myApp.controller("main", ['$scope', function($scope) {
    $scope.tags = ['one', 'two', 'three'];
    
}]);

myApp.directive("mTag", ['$resource', function($resource) {
  return {
    restrict: 'E',
    controller: 'TagController',
    scope: {
      read: '=',  //read or write (I provide an API in case the user only wants to show the tags and not provide the input
      tags: '=ngModel'  //the ng-model binding
    },
    template: '<div class="input-group" ng-show="!read">'\
                '<input type="text" name="temptags" ng-model="temptags" class="form-control"  placeholder="Enter comma separated tags" ng-class="{\'haserror\':!validate(temptags)}" style="margin-bottom:0px"/>'\
                '<span ng-show="!validate(temptags)" class="label label-danger">Please only use regular characters for tags (a-z)</span>'\
                '<div class="input-group-btn" style="vertical-align:top">'\
                '<button class="btn btn-inline" ng-click="appendTags(temptags)">Add</button>'\
                '</div>'\
                '</div>'\
                '<div class="margintopten">'\
                '<span class="label label-default normal tag marginrightten" ng-repeat="tag in tags"><a ng-click="deleteTag(tag)" ng-if="!read"><i class="fa fa-times-circle" ng-click="deleteTag(tag)"></i></a>  {{tag}}</span>'\
                '</div>'
  };
}]);

myApp.controller('TagController', 
    ['$scope', function ($scope) {

    //only allows inputs of alphabetic characters (no numbers or special chars)
    $scope.validate = function(string) {
    	if (!string || string.length === 0) {
    		return true;
    	} else {
    		return string.match(/^\s?[A-Z,\s]+$/i);	
    	}
    };

    //Adds the tag to the set
    function addTag (string) {
    	if ($scope.tags.indexOf(string.toLowerCase()) === -1) {
    		$scope.tags.push(string);
    	}
    };

    //When the user clicks "Add", all unique tags will be added
    $scope.appendTags =...